/**
* Content
*/
body {

background-color: transparent;
color: #000;
}
body:hover {

background-color: transparent;
color: #003bff;
}
a:active {

color:#000;
}
.page a.active {

font-weight: bold;
color:#000;
}
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 1em;
}
hr {

background: rgba(0, 0, 0, 0.5);
border: 0;
height: 1px;
display: block;
margin-right:15%;
}
.content img {

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

margin-top: 1rem;
margin-bottom: .5rem;
font-family: "Alte Haas Grotesk", Icons;
font-weight: bold;
font-size: 15px;
color: rgba(0, 0, 0, 1);
font-style: normal;
line-height: 1.6;
}
body.mobile .gallery_image_caption {

margin-top: 1rem;
margin-bottom: .5rem;
font-family: "Alte Haas Grotesk", Icons;
font-weight: bold;
font-size: 12px;
color: rgba(0, 0, 0, 1);
font-style: normal;
line-height: 1.6;
}
/**
* Loading Animation
*/
.loading[data-loading] {

position: fixed;
bottom: 8px;
left: 8px;
}
/**
* Editor styles
*/
[data-predefined-style="true"] bodycopy {

font-size: 15px;
font-weight: 400;
letter-spacing: 0.01rem;
color: rgb(0, 0, 0);
font-family: "Alte Haas Grotesk", Icons;
font-style: normal;
line-height: 1.6;
}
[data-predefined-style="true"] bodycopy a {

color: rgba(0, 0, 0, 1);
text-decoration: underline;
text-decoration-color: rgba(58, 180, 135, 0);
transition:0.3s;
}
[data-predefined-style="true"] bodycopy a:hover {

text-decoration-color:#3ab487;
color:#3ab487;
text-decoration: underline;
transition:0.3s;
}
bodycopy a.image-link{

opacity:1;
}
bodycopy a.icon-link,
bodycopy a.image-link:hover,
bodycopy a.icon-link:hover {

border-bottom: 0;
padding-bottom: 0;
}
bodycopy a.image-link:active {

opacity:.5;
}
[data-predefined-style="true"] h1 {

font-family: Charter, Icons;
letter-spacing: -0.1rem;
padding: 0;
margin: 0;
font-size: 3.8rem;
line-height: 1.1;
color: rgb(0, 0, 0);
font-style: normal;
font-weight: 700;
}
[data-predefined-style="true"] h5 {

font-family: "Neue Haas Grotesk", Icons;
letter-spacing: -0.1rem;
padding: 0;
margin: 0;
font-size: 1.8rem;
line-height: 1.1;
color: rgb(0, 0, 0);
font-style: normal;
font-weight: 500;
}
[data-predefined-style="true"] h1 a {

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

font-family: Charter, Icons;
font-style: normal;
font-weight: 500;
padding: 0;
margin: 0;
color: rgb(0, 0, 0);
font-size: 2.6rem;
line-height: 1.3;
}
[data-predefined-style="true"] h2 a {

color: rgba(0, 0, 0, 0.75);
}
[data-predefined-style="true"] h3 {

font-family: "Nitti Grotesk", Icons;
font-style: normal;
font-weight: 400;
padding: 0;
margin: 0;
color: rgb(0, 0, 0);
font-size: 2rem;
line-height: 1;
}
[data-predefined-style="true"] h3 a {

color: rgba(0, 0, 0, 0.75);
}
[data-predefined-style="true"] h4 {

font-family: "Alte Haas Grotesk", Icons;
font-style: normal;
font-weight: 400;
padding: 0;
margin: 0;
color: rgb(0, 0, 0);
font-size: 1.6rem;
line-height: 1.2;
letter-spacing: normal;
}
[data-predefined-style="true"] h4 a {

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

display: inline-block;
font-size: 12px;
line-height: 1.6;
letter-spacing: 0.01rem;
font-family: "Alte Haas Grotesk", Icons;
font-style: normal;
font-weight: 400;
color: rgb(0, 0, 0);
}
[data-predefined-style="true"] small a {

color: rgba(0, 0, 0, 0.75);
border-bottom-width: 0em;
}
/**
* Breakpoints
*/
[data-css-preset] .page {

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

position: relative;
max-width: 100%;
width: 100%;
background-color: transparent /*!page_bgcolor*/;
}
[data-css-preset] .container {

margin-left: auto /*!content_right*/;
margin-right: 0 /*!content_right*/;
text-align: left /*!text_left*/;
}
[data-css-preset] body {

background-color: transparent/*!body_bgcolor*/;
}
[data-css-preset] .container_width {

width: 85%/*!content_right*/;
}
[data-css-preset] .content_padding {

padding-top: 4rem /*!main_margin*/;
padding-bottom: 8rem /*!main_margin*/;
padding-left: 4rem /*!main_margin*/;
padding-right: 4rem /*!main_margin*/;
}
[data-css-preset] text-limit {

display: inline-block /*!text_width*/;
max-width: 66rem/*!text_width*/;
}
/**
* Thumbnails
*/
div[thumbnails] {

justify-content: flex-start;
}
.thumbnails .content_padding {

padding: 2rem;
}
[data-css-preset] .thumbnails {

background-color: transparent/*!thumbnails_bgcolor*/;
}
[data-css-preset] .thumbnails_width {

width: 85%/*!thumbnails_width*/;
}
[data-css-preset] [thumbnails-pad] {

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

margin: -1rem/*!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 img{

box-shadow: none !important;
}
.thumbnails .title {

margin-top: 0rem;
margin-bottom: 0rem;
font-size: 1.8rem;
font-weight: 700;
color: rgba(0, 0, 0, 1);
font-family: Charter, Icons;
font-style: normal;
line-height: 1.1;
}
body.mobile .thumbnails .title {

margin-top: 1.2rem;
margin-bottom: 0rem;
font-size: 1.8rem;
font-weight: 400;
color: rgba(255, 255, 255, 1);
font-family: "Nitti Grotesk", Icons;
font-style: normal;
line-height: 1.1;
}
.thumbnails .tags {

margin-top: 0rem;
margin-bottom: 0rem;
font-size: 1.3rem;
font-weight: 400;
color: rgba(0, 0, 0, 0.75);
font-family: "Nitti Grotesk", Icons;
font-style: normal;
line-height: 1.2;
opacity:0;
}
.thumbnails .tags a {

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

margin-top: 0rem;
}
.thumbnails .thumbnail > a {

position: relative;
}
.thumbnails .thumbnail .title {

background-color: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(6px);
outline: 1px solid #fff;
outline-offset: -1rem;
text-align: center;
padding: 0.5rem 1.2rem 0.5rem 1.2rem;
margin: 0rem;
color: rgba(255, 255, 255, 1);
align-content: flex-start;
position: absolute;
bottom:0rem;
left:0rem;
top:0rem;
right:0rem;
z-index: 9;
opacity: 0;
border-radius: 0 0 0 0;
transition: 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
}
body.mobile .thumbnails .thumbnail .title {

background-color: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(3px);
padding: 0.5rem 1.2rem 0.5rem 1.2rem;
margin: 0rem;
color: rgba(0, 0, 0, 1);
align-content: flex-start;
display: flex;
position: absolute;
left: 0rem;
right: 0rem;
bottom:0rem;
z-index: 9;
opacity: 0;
transition: 0.3s ease;
}
.thumbnails .title span {

display: block;
}
body.mobile .thumbnails .title span {

display: inline-block;
}
.thumbnails .thumbnail:hover .title {

opacity: 1;
}
body.mobile .thumbnails .thumbnail .title {

opacity: 0;
}
.thumbnails .thumbnail:hover .tags {

opacity: 1;
}
/**
* Site Menu
*/
[data-css-preset] #site_menu_button {

color: rgba(0, 0, 0, 1);
font-size: 28px /*!site_menu_button*/;
padding: 6px;
line-height: 1;
background: rgba(33, 32, 46, 0);
position: fixed;
backdrop-filter: blur(3px);
top: 4rem /*!site_menu_button*/;
right: 4rem /*!site_menu_button*/;
}
body.mobile #site_menu_button {

margin: -6px;
font-size: 28px;
backdrop-filter: blur(3px);
}
#site_menu_button.custom_icon {

width: 40px;
height: auto;
backdrop-filter: blur(3px);
}
#site_menu_button.active {

display: none;
backdrop-filter: blur(3px);
}
/**
* Site Menu
*/
#site_menu {

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif,
"Sans Serif", Icons;
background: rgba(20, 20, 20, 0.85);
backdrop-filter: blur(6px);
line-height: 3.2rem;
font-size: 2.4rem;
font-style: normal;
font-weight: 400;
padding: 20px 30px 20px 30px;
max-width: 400px;
min-width: 300px;
text-align: left;
display: flex;
justify-content: flex-start;
transition: 0.3s ease;
}
body.mobile #site_menu {

width: 100%;
transition: 0.3s ease;
}
#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 {

color:#3ab487;
text-decoration: underline;
}
#site_menu a.active {

color:#3ab487;
text-decoration: underline;
}
#site_menu .close {

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

display: block;
font-size: 50px;
line-height: 1em;
transition: 0.3s ease;
}
#site_menu .break {

height: 28px;
backdrop-filter: blur(3px);
}
#site_menu .indent {

margin-left: 28px;
backdrop-filter: blur(3px);
}
/*
* 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: 1rem /*!shop_button*/;
left: 1.5rem /*!shop_button*/;
}
#shop_button.text {

font-size: 1.6rem;
font-weight: 400;
color: rgba(0, 0, 0, 0.75);
font-family: "Nitti Grotesk", Icons;
padding: 0;
line-height: 1.3;
font-style: normal;
}
#shop_button.custom_icon {

width: 40px;
height: auto;
}
body.mobile #shop_button:not(.text) {

margin: -6px;
font-size: 40px;
}
/*
* Shop Product Widget
*/
.shop_product {

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

font-family: "Nitti Grotesk", Icons;
font-size: 2rem;
line-height: 1;
color: rgba(0, 0, 0, 1);
display: block;
margin-top:1rem;
margin-bottom: 1rem;
font-style: normal;
font-weight: 400;
}
.shop_product .dropdown {

font-family: "Nitti Grotesk", Icons;
font-size: 1.3rem;
display: inline-block;
width: 100%;
border: 1px solid rgba(0,0,0,.2);
background: white
url(https://static.cargo.site/assets/images/select-line-arrows.svg)
no-repeat right;
margin-bottom: 1rem;
line-height: 1.2;
padding: .7rem 2.5rem .7rem 1rem;
font-style: normal;
font-weight: 400;
color: rgba(0, 0, 0, 0.75);
}
.shop_product .button {

font-family: "Nitti Grotesk", Icons;
font-size: 1.6rem;
background:#3ab487;
color: rgba(255,255,255,1);
flex: 0 0 50%;
text-align: left;

line-height: 1;
padding: 0.8rem 1.6rem 0.8rem;
font-style: normal;
font-weight: 700;
}
.shop_product .button:hover {

color:#fff;
box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2);
}
/*
* 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: "Nitti Grotesk", Icons;
transition: 100ms opacity ease-in-out;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 3.5rem 0;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 1.3;
}
.quick-view-caption span {

padding: 0.5rem 1rem;
display: inline-block;
background: rgba(0,0,0,0.25);
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: rgba(0, 0, 0, 0.6);
stroke-width: 2.5px;
}
/**
* 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.6rem;
line-height: 1.3;
font-family: "Nitti Grotesk", 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;
}
.feed_header2 {

font-family: "Nitti Grotesk", Icons;
position:fixed;
right:0px;
bottom:0px;
color: #000;
font-size:14px;
padding-bottom: 4px;
padding-right:2em;
padding-left:8px;
padding-top: 2px;
z-index: 998;
background-color: transparent;
background-clip: padding-box;
border-radius: 4px;
font-style: normal;
font-weight: 400;
}
.button {

font-family: "Nitti Grotesk", inherit;
background-color: rgba(14, 163, 127, 1); /* #0040a4 */
border: none;
border-radius: 12px;
color: white;
font-size:16px;
padding: 0.8rem 1.6rem 0.8rem;
margin-top: 0.6rem;
box-shadow:rgba(0, 0, 0, 0.25) 4px 4px 7px;
text-align: center;
font-weight: bold;
text-decoration: none;
display: inline-block;
transition: 0.3s;
}
body.mobile .button {

font-family: "Nitti Grotesk", inherit;
background-color: rgba(14, 163, 127, 1); /* #0040a4 */
border: none;
border-radius: 12px;
color: white;
padding: 0.8rem 1.6rem 0.8rem;
box-shadow:rgba(0, 0, 0, 0.25) 4px 4px 7px;
text-align: center;
font-weight: bold;
text-decoration: none;
display: inline-block;
transition: 0.3s;
width:auto;
}
.button:hover{

background-color: rgba(0, 0, 0, 1);
box-shadow:rgba(0, 0, 0, 0.3) 8px 8px 16px;
}
.button2 {

font-family: "Nitti Grotesk", inherit;
background-color: transparent; /* #0040a4 */
border: none;
border-radius: 12px;
color: #000;
font-size: 16px;
padding: 0.8rem 1.6rem 0.8rem;
margin-top: 0.6rem;
box-shadow:rgba(0, 0, 0, 0.25) 4px 4px 7px;
text-align: center;
font-weight: bold;
text-decoration: none;
display: inline-block;
transition: 0.3s;
}
body.mobile .button2 {

font-family: "Nitti Grotesk", inherit;
background-color: transparent; /* #0040a4 */
border: none;
border-radius: 12px;
color: #000;
padding: 0.8rem 1.6rem 0.8rem;
box-shadow:rgba(0, 0, 0, 0.25) 4px 4px 7px;
text-align: center;
font-weight: bold;
text-decoration: none;
display: inline-block;
transition: 0.3s;
width:auto;
}
.button2:hover{

background-color: rgba(255, 255, 255, 1);
box-shadow:rgba(0, 0, 0, 0.3) 8px 8px 16px;
}
.btn-icon {

font-family: "Nitti Grotesk", inherit;
background-color: rgba(255, 255, 255, 0.0); /* #0040a4 */
border: none;
border-radius: 12px;
color: #000;
padding: 0.8rem 1.6rem 0.8rem;
font-size:16px;
font-weight: bold;
display: inline-block;
transition: 0.3s;
}
body.mobile .btn-icon {

font-family: "Nitti Grotesk", inherit;
background-color: rgba(255, 255, 255, 0.5); /* #0040a4 */
border: none;
border-radius: 12px;
color: #000;
padding: 0.8rem 1.6rem 0.8rem;
font-weight: bold;
display: inline-block;
transition: 0.3s;
}
.btn-icon:hover{

background-color: rgba(255, 255, 255, 1);
box-shadow: 4px 4px 12px rgba(0, 0, 0, .2);
}
.btn-icon2 {

font-family: "Nitti Grotesk", inherit;
background-color: rgba(255, 255, 255, 0.0); /* #0040a4 */
border: none;
width:119px;
border-radius: 12px 12px 0 0;
color: #000;
padding: 0.8rem 1.6rem 0.8rem;
font-weight: bold;
display: inline-block;
transition: 0.3s;
}
.btn-icon2:hover{

background-color: rgba(255, 255, 255, 1);
box-shadow: 4px 4px 12px rgba(0, 0, 0, .2);
}
.btn-icon3 {

font-family: "Nitti Grotesk", inherit;
background-color: rgba(255, 255, 255, 0.0); /* #0040a4 */
border: none;
width:auto;
border-radius: 0 0 0 0;
color: #000;
padding: 0.8rem 1.6rem 0.8rem;
font-weight: bold;
display: inline-block;
transition: 0.3s;
}
.btn-icon3:hover{

background-color: rgba(255, 255, 255, 1);
}
.btn-icon-topmenu {

font-family: "Nitti Grotesk", inherit;
background-color: rgba(255, 255, 255, 0.0); /* #0040a4 */
border: none;
width:auto;
border-radius: 0 0 0 0;
color: #000;
padding: 0.8rem 1.6rem 0.8rem;
font-weight: bold;
display: inline-block;
transition: 0.3s;
}
.btn-icon-topmenu:hover{

background-color: rgba(0, 0, 0, 1);
color: #fff;
}
bodycopy .btn-icon a:active{

font-family: "Nitti Grotesk", inherit;
background-color: rgba(58, 180, 135, 1); /* #0040a4 */
border: none;
border-radius: 12px;
color: #000;
padding: 1.2rem 2.4rem 1.2rem;
font-weight: bold;
display: inline-block;
transition: 0.3s;
}
.btn-icon4 {

font-family: "Nitti Grotesk", inherit;
background-color: rgba(255, 255, 255, 0.0); /* #0040a4 */
border: none;
width:auto;
border-radius: 0 0 12px 12px;
color: #000;
padding: 0.8rem 1.6rem 0.8rem;
font-weight: bold;
display: inline-block;
transition: 0.3s;
}
.btn-icon4:hover{

background-color: rgba(255, 255, 255, 1);
}
.btn-icon-store {

font-family: "Nitti Grotesk", inherit;
background-color: rgba(255, 255, 255, 1.0); /* #0040a4 */
border: none;
border-radius: 12px;
color: #000;
padding: 0.8rem 1.6rem 0.8rem;
font-size:16px;
font-weight: bold;
display: inline-block;
transition: 0.3s;
}
body.mobile .btn-icon-store {

font-family: "Nitti Grotesk", inherit;
background-color: rgba(255, 255, 255, 0.5); /* #0040a4 */
border: none;
border-radius: 12px;
color: #000;
padding: 0.8rem 1.6rem 0.8rem;
font-weight: bold;
display: inline-block;
transition: 0.3s;
}
.btn-icon-store:hover{

background-color: rgba(255, 255, 255, 1);
box-shadow: 4px 4px 12px rgba(0, 0, 0, .2);
}
.nav-icon {

font-family: "Nitti Grotesk", inherit;
background-color: transparent; /* #0040a4 */
border: none;
border-radius: 12px;
color: #000;
padding: 0.8rem 1.6rem 0.8rem;
font-weight: bold;
display: inline-block;
transition: 0.3s;
}
body.mobile .nav-icon {

font-family: "Nitti Grotesk", inherit;
background-color: transparent; /* #0040a4 */
border: none;
border-radius: 12px;
color: #000;
padding: 0.8rem 1.6rem 0.8rem;
font-weight: bold;
display: inline-block;
transition: 0.3s;
}
.nav-icon:hover{

background-color: rgba(255, 255, 255, 1);
box-shadow: 4px 4px 12px rgba(0, 0, 0, .2);
}
#navbar {

background-color: transparent; /* Black background color */
position: fixed; /* Make it stick/fixed */
display:block;
top: 0; /* Stay on top */
left: 0;
width: auto; /* Full width */
margin-left:15%;
transition: top 0.3s; /* Transition effect when sliding down (and up) */
}
/* Style the navbar links */
#navbar a {

font-family: "Nitti Grotesk", inherit;
font-size: small;
text-transform: uppercase;
color: #000;
background-color: #fff;
border-radius: 12px;
padding: 0.8rem 1.6rem 0.8rem 1.6rem;
margin-bottom: .4rem;
display: inline-block;
text-align: left;
text-decoration: none;
margin-right:1em;
}
#navbar a:hover {

background-color: #fff;
color: black;
box-shadow: 4px 4px 12px rgba(0, 0, 0, .2);
}
#navbar a:active {

background-color: #000;
color: #fff;
box-shadow: 4px 4px 12px rgba(0, 0, 0, .2);
}
#navbar img{

display:inline-block;
box-shadow: none !important;
right:0;
bottom:0;
margin-left:-8px;
margin-right:4px;
margin-bottom: -5px;
}
#helpbar {

background-color: transparent; /* Black background color */
position: fixed; /* Make it stick/fixed */
display:block;
right: 0; /* Stay on right */
bottom:0;
padding-right:2em;
padding-bottom: 2em;
width: 85%; /* Full width */
text-align: right;
transition: top 0.3s; /* Transition effect when sliding down (and up) */
}
/* Style the navbar links */
#helpbar a {

font-family: "Nitti Grotesk", inherit;
font-size: small;
text-transform: uppercase;

color: #000;
background-color: #fff;
border-radius: 12px;
padding: 0.8rem 1.6rem 0.8rem 1.6rem;
margin-bottom: .4rem;
display: inline-block;
text-align: right;
text-decoration: none;
}
#helpbar a:hover {

background-color: #fff;
color: black;
box-shadow: 4px 4px 12px rgba(0, 0, 0, .2);
}
#helpbar a:active {

background-color: #fff;
color: black;
box-shadow: 4px 4px 12px rgba(0, 0, 0, .2);
}
.newbutton {

background-color: #3ab487; /* #a0a0a0 */
border: none;
position: absolute;
padding: 4px 6px;
font-family: "Nitti Grotesk", Icons;
font-weight: 700;
text-decoration: none;
font-size: 1.2rem;
display: inline;
margin-left: .75rem;
rotate: 0deg;
-moz-transition:all 0.5s ease-in-out;
-webkit-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
-ms-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
-moz-animation:blink normal 1.5s infinite ease-in-out;
/* Firefox */
-webkit-animation:blink normal 1.5s infinite ease-in-out;
/* Webkit */
-ms-animation:blink normal 1.5s infinite ease-in-out;
/* IE */
animation:blink normal 1.5s infinite ease-in-out;
/* Opera */
}
.newbutton2 {

background-color: rgba(0, 0, 0, 1); /* #a0a0a0 */
border: none;
color: #fff;
padding: 5px 6px;
text-decoration: none;
font-size: 1rem;
font-family: "Neue Haas Grotesk", Icons;
display: inline;
text-align: left;
line-height: 4rem;
font-style: normal;
font-weight: 700;
}
.newbutton3 {

background-color: transparent; /* #a0a0a0 */
border: none;
position: absolute;
padding: 4px 6px;
color: #3ab487;
font-family: "Nitti Grotesk", Icons;
font-weight: 700;
text-decoration: none;
font-size: 1.2rem;
display: inline;
margin-left: .75rem;
rotate: 0deg;
-moz-transition:all 0.5s ease-in-out;
-webkit-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
-ms-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
-moz-animation:blink normal 1.5s infinite ease-in-out;
/* Firefox */
-webkit-animation:blink normal 1.5s infinite ease-in-out;
/* Webkit */
-ms-animation:blink normal 1.5s infinite ease-in-out;
/* IE */
animation:blink normal 1.5s infinite ease-in-out;
/* Opera */
}
.content img {

box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2);
}
[image-gallery="slideshow"] .gallery_card {

padding: 0;
}
.no-shadow img {

box-shadow: none !important;
}
.headermenu {

background-color: rgba(244, 244, 244, 1);
font-weight: bold;
text-align: center;
width: 100%;
padding: 20px 0 20px 0;
display: none;
position: fixed;
top: 0;
}
body.mobile .headermenu {

background-color: rgba(244, 244, 244, 1);
font-weight: bold;
font-size: 14px;
text-align: center;
width: auto;
margin-top: auto;
display: inline;
position: fixed;
}
:root {
 scroll-behavior: smooth; 
}
/* Dropdown Button */
.dropbtn {

font-family: "Nitti Grotesk", inherit;
background-color: rgba(255, 255, 255, 0.0); /* #0040a4 */
border: none;
border-radius: 12px;
color: #000;
padding: 0.8rem 1.6rem 0.8rem;
font-weight: bold;
display: inline-block;
transition: 0.3s;
}
.dropbtn:hover{

background-color: rgba(255, 255, 255, 1);
box-shadow: 4px 4px 12px rgba(0, 0, 0, .2);
}
/* The container <div> - needed to position the dropdown content */
.dropdown {

position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {

display: block;
opacity:0;
position: absolute;

background-color: #f2f2f2;
border-radius: 0 0 12px 12px;
box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2);
z-index: 1;
transition:.3s;
}
/* Links inside the dropdown */
.dropdown-content a {

text-decoration: none;
display: block;
opacity:1;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {

background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {

display: block;
opacity:1;
}
/* Change the background color of the dropdown button when the dropdown
content is shown */
.navbtn{

width:auto;
padding-right:20px;
padding-bottom: 20px;
font-weight: bold;

z-index: 999;
}
.spiral img{

display:block;
min-height:400px;
height:100%;
object-fit: cover;
overflow: hidden;
box-shadow: 4px 4px 12px rgba(0, 0, 0, .2);

}
.ux-icon img {

border-radius: 20px;
box-shadow: inherit;
}
.ux-icon2 {

transition: top 0.3s; /* Transition effect when sliding down (and up) */
}
.ux-icon2 img{

border-radius: inherit;
box-shadow:rgba(0, 0, 0, 0) 8px 8px 16px;
transition: top 0.3s; /* Transition effect when sliding down (and up) */
}
.ux-icon2 img:hover {

box-shadow:rgba(0, 0, 0, 0.3) 8px 8px 16px;
transition: top 0.3s; /* Transition effect when sliding down (and up) */
}
.ux-demo img {

border-radius: 40px;
box-shadow: none !important;
}
body.mobile .ux-icon2 img{

border-radius:00px;
}
body.mobile .ux-icon2 img:hover{

border-radius:00px;
}
.margin-text{

margin-left:25%;
margin-right:25%;
}
.margin-textR{

margin-right:25%;
}
.more-margin-textR{

margin-right:40%;
}
.less-margin-textR{

margin-right:15%;
}
.margin-textL{

margin-left:25%;
}
body.mobile .margin-text{

margin-left:auto;
margin-right:auto;
}
body.mobile .margin-textR{

margin-right:auto;
}
body.mobile .less-margin-textR{

margin-right:auto;
}
body.mobile .margin-textL{

margin-left:auto;
}
/* Style the header: fixed position (always stay at the top) */
.header {

position: fixed;
top: 0;
left:0;
padding-top: 30px;
z-index: 999;
width: 100%;
background-color: transparent;
}
body.mobile .feed_header2 {

font-family: "Nitti Grotesk", Icons;
position:fixed;
right:0px;
bottom:0px;
color: rgba(0, 0, 0, 0.75);
font-size:14px;
padding-bottom: 4px;
padding-right:18px;
padding-left:18px;
padding-top: 2px;
z-index: 998;
background-color: transparent;
background-clip: padding-box;
border-radius: 4px;
font-style: normal;
font-weight: 400;
}
/* Tooltip container */
.tooltip {

position: relative;
display: inline-block;
}
/* Tooltip text */
.tooltip .tooltiptext {

visibility: hidden;
width: auto;
background-color: #fff;
color: rgba(0, 0, 0, 0.75);
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
opacity: 0;
transition: opacity .3s ease-in-out;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {

visibility: visible;
top: -5px;
left: 100%;
margin-left:18px;
opacity: 1;
}
.tooltip .tooltiptext::after {

content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.centered {

display: flex;
align-items: center;
}
.less-margin-text{

margin-left:15%;
margin-right:15%;
}
body.mobile .less-margin-text{

margin-left:0%;
margin-right:0%;
}
.less-margin-text2{

margin-left:7%;
margin-right:7%;
}
body.mobile .less-margin-text2{

margin-left:0%;
margin-right:0%;
}
.more-margin-text{

margin-left:50%;
margin-right:50%;
}
body.mobile .more-margin-text{

margin-left:inherit;
margin-right:inherit;
}
.rotate {

display: inline-flex;
-webkit-animation: rotate 8s linear infinite;
animation: rotate 8s linear infinite;
}
@keyframes rotate {
from {

transform: rotate(0deg);
}
to {

transform: rotate(360deg);
}
}
.menuspace {

line-height: 1.6;
}
.menublock{

display: block;
position: relative;
z-index:999;
}
body.mobile h1{

font-size: 3.4rem;
letter-spacing: -0.05rem;
}
body.mobile h2{

font-size: 2.4rem;
line-height: 3.2rem;
}
.mobile-header{

padding-top:1.4rem;
padding-right:4px;
padding-left:4px;
box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2);
z-index:999;
}
.btn-menu{

padding-top:12px;
padding-bottom:12px;
padding-left:24px;
padding-right:24px;
}
.background-blur{

backdrop-filter: blur(3px);
}
body.mobile .background-blur{

backdrop-filter: blur(3px);
}
.mainlogo img{

box-shadow: none !important;

min-width:30px;
min-height:30px;
max-width:48px;
}
.mainlogo-small a {

display: inline-flex;
align-items: center;
gap: 6px; /* space between logo and text */
text-decoration: none;
color: inherit;
}
.mainlogo-small img {

vertical-align: middle;
width: 18px;
height: 18px;
display: inline-block;
box-shadow:none !important;
filter:none !important;
/* optical nudge: adjust the Y offset. positive => move down, negative
=> move up */
transform: translateY(3px);
/* tweak -1px to -2px or 0px until it looks perfectly centered to your
eye */
}
body.mobile .mainlogo img{

box-shadow: none !important;

min-width:28px;
min-height:28px;
max-width:28px;
}
.storeitem img{

object-fit: cover;
display:block;
max-height: 28rem;
max-inline-size: 22rem;

margin-bottom:1.2rem;
}
.storeitemB img{

object-fit: contain;
display:block;
max-height: 22rem;
max-inline-size: 22rem;

margin-bottom:1.2rem;
box-shadow: none !important;
}
.storeitem{

display:inline-block;
height: auto;
max-inline-size: 60rem;
width:auto;
padding: 20px;
background-color: transparent;
border-radius: 12px;
border-width: 2px;
border-style: solid;
border-color:transparent;
margin-right: 2rem;
margin-bottom: 4rem;
}
.storeitemB{

display:inline-block;
height: auto;
max-inline-size: 60rem;
width:auto;
padding: 20px;
background-color: transparent;
border-radius: 12px;
border-style: solid;
border-width: 2px;
border-color:transparent;
margin-right:2rem;
margin-bottom: 4rem;
}
body.mobile .storeitem{

display:inline-block;

max-inline-size: 400px;

border-radius: 12px;
box-shadow: inherit;
padding: 20px;
}
body.mobile .storeitemB{

display:inline-block;

max-inline-size: 400px;

border-radius: 12px;
box-shadow: inherit;
padding: 20px;
}
body.mobile .storeitem img{

display:inherit;
object-fit: cover;
height: 265px;
width: auto;
}
body.mobile .storeitemB img{

display:inherit;
object-fit: scale-down;
height: 265px;
width: auto;
box-shadow: none !important;
}
.extimg img{

object-fit: scale-down;
max-width: 120px;

box-shadow: none !important;
}
.jump-marker {

display: block;
height: 1px; /* makes it a real, scrollable element */
scroll-margin-top: 60px;
}
.jump-marker-store {

display: block;
height: 1px; /* ensures the anchor has a physical scroll target */
scroll-margin-top: -30rem; /* adjust to match your fixed header height
*/
position: static; /* important: disables width-dependent movement */
margin: 0; /* prevent layout shifting */
padding: 0;
}
.ux-section{

margin-left:15%;
margin-right:15%;
padding-bottom:18rem;
text-align: left;
}
.ux-section img{

margin-left:auto;
margin-right:auto;

}
body.mobile .ux-section{

margin-left:auto;
margin-right:auto;
padding-bottom:12rem;
}
.ux-section2{

margin-left:15%;
margin-right:15%;
padding-bottom:18rem;
text-align: left;
}
body.mobile .ux-section2{

margin-left:auto;
margin-right:auto;
padding-bottom:12rem;
}
.ux-section3{

background-image:url('https://files.cargocollective.com/c1570543/triangle-web2.png');
background-attachment: fixed;
background-position: center;
background-repeat: repeat;
margin-left:0%;
margin-right:0%;
padding-left:15%;
padding-right:15%;
margin-bottom:8rem;
border-radius: 40px;
box-shadow: 0 0 64px 64px #f2f2f2 inset;
}
body.mobile .ux-section3{

margin-left:auto;
margin-right:auto;
padding-left: 0%;
padding-right: 0%;
background-attachment: scroll;
padding-bottom:12rem;
}
.ux-banner{

margin-left:15%;
margin-right:15%;
padding-bottom:4rem;
}
.ux-banner img{

margin-left:auto;
margin-right:auto;
box-shadow: none !important;
}
body.mobile .ux-banner{

margin-left:auto;
margin-right:auto;
padding-bottom:4rem;
}
.pagetitle{

display:inline-block;
padding: 0.8rem 1.6rem 0.8rem;
font-style: inherit;
font-weight: bold;
font-size: 1.2rem;
text-transform: uppercase;
color:#000;
background-color: #f2f2f2;
width:auto;
}
.uxpagetitle{

display:inline-block;
padding: 0.2rem 0.6rem 0.2rem 0.6rem;
font-style: inherit;
font-weight: bold;
font-size: 1.2rem;
text-transform: uppercase;
color:#fff;
background-color: #000;
width:auto;
}
.uxpagetitle2{

display:inline-block;
padding: 0.2rem 0.6rem 0.2rem 0.6rem;
margin-bottom:.6rem;
font-style: inherit;
font-weight: bold;
font-size: 1.2rem;
text-transform: uppercase;
color:#000;
background-color: #fff;
width:auto;
}
.ux-button {

font-style:inherit;
font-weight: bold;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: .05rem;
color:#000;
background-color: rgba(255, 255, 255, 0.0); /* #0040a4 */
border: none;
border-radius: 12px;
padding: 0.8rem 1.6rem 0.8rem;
display: inline-block;
transition: 0.3s;
}
body.mobile .ux-button {

font-family:inherit;
font-weight: bold;
font-size: 1.2rem;
text-transform: uppercase;
color:#000;
background-color: rgba(255, 255, 255, 0.5); /* #0040a4 */
border: none;
border-radius: 12px;
padding: 0.8rem 1.6rem 0.8rem;
display: inline-block;
transition: 0.3s;
}
.ux-button:hover{

background-color: rgba(255, 255, 255, 1);
box-shadow: 4px 4px 12px rgba(0, 0, 0, .2);
}
@keyframes blink {
0% {

color: rgba(255, 255, 255, 0.5)
}
50% {

color: rgba(255, 255, 255, 1)
}
100% {

color: rgba(255, 255, 255, 0.5)
}
}
@-webkit-keyframes blink {
0% {

color: rgba(255, 255, 255, 0.5)
}
50% {

color: rgba(255, 255, 255, 1)
}
100% {

color: rgba(255, 255, 255, 0.5)
}
}
.pagelogo{

display:fixed;
font-style:inherit;
font-weight: medium;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: .05rem;
color:#000;
}
.pagelogo img{

box-shadow: none !important;
}
#deskbar {

background-color: transparent; /* Black background color */
position: fixed; /* Make it stick/fixed */
display: inline-block;
left: 60px;
top: 4px; /* Stay on top */
width: 100%; /* Full width */
text-align: left;
transition: top 0.3s; /* Transition effect when sliding down (and up) */
}
/* Style the navbar links */
#deskbar a {

font-family: "Nitti Grotesk", inherit;
font-size: small;
text-transform: uppercase;
display: inline-block;
color: #000;
background-color: #fff;
border-radius: 12px;
padding: 0.8rem 1.6rem 0.8rem 1.6rem;
font-weight: bold;
text-align: left;
text-decoration: none;
}
#deskbar a:hover {

background-color: #fff;
color: black;
}
#deskbar a:active {

background-color: #fff;
color: black;
box-shadow: 4px 4px 12px rgba(0, 0, 0, .2);
}
#deskbar2 {

background-color: transparent; /* Black background color */
position: fixed; /* Make it stick/fixed */
display: inline-block;
left: 300px;
top: 4px; /* Stay on top */
width: 100%; /* Full width */
text-align: left;
transition: top 0.3s; /* Transition effect when sliding down (and up) */
}
#deskbar2 a {

font-family: "Nitti Grotesk", inherit;
font-size: small;
text-transform: uppercase;
display: inline-block;
color: #000;
background-color: #fff;
border-radius: 12px;
padding: 0.8rem 1.6rem 0.8rem 1.6rem;
font-weight: bold;
text-align: left;
text-decoration: none;
}
#deskbar2 a:hover {

background-color: #fff;
color: black;
box-shadow: 4px 4px 12px rgba(0, 0, 0, .2);
}
#deskbar2 a:active {

background-color: #fff;
color: black;
box-shadow: 4px 4px 12px rgba(0, 0, 0, .2);
}
#deskbar img{

display:inline-block;
box-shadow: none !important;
left:0;
top:0;
margin-left:-8px;
margin-right:-8px;
margin-bottom: -5px;
}
#deskbar img:hover{

display:inline-block;
box-shadow: none !important;
}
#desklogo {

background-color: transparent; /* Black background color */
position: fixed; /* Make it stick/fixed */
display: inline-block;
left: 0;
top: 0; /* Stay on top */
width: 100%; /* Full width */
text-align: left;
transition: top 0.3s; /* Transition effect when sliding down (and up) */
}
/* Style the navbar links */
#desklogo a {

font-family: "Nitti Grotesk", inherit;
font-size: small;
text-transform: uppercase;
color: #000;
background-color: #fff;
border-radius: 12px;
padding: 0.8rem 1.6rem 0.8rem 1.6rem;
margin-bottom: .4rem;
font-weight: bold;
display: inline-block;
text-align: left;
text-decoration: none;
}
#desklogo a:hover {

background-color: #fff;
color: black;
}
#desklogo a:active {

background-color: #fff;
color: black;
box-shadow: 4px 4px 12px rgba(0, 0, 0, .2);
}
#desklogo img{

display:inline-block;
box-shadow: none !important;
left:0;
top:0;
margin-left:-8px;
margin-right:-8px;
margin-bottom: -5px;
}
#desklogo img:hover{

display:inline-block;
box-shadow: none !important;
}