#toolset {
	display: none;
}

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

a:active {
	opacity: 0.7;
}

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

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

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

hr {
	background: rgba(0, 0, 0, 0.6);
	border: 0;
	height: 2px;
	display: block;
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;
}

.content img {
	float: none;
	margin-bottom: 0;
    vertical-align: bottom;
}

[image-gallery="slideshow"] {
    margin-bottom: 2rem;
}

.gallery_image_caption {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.4);
	font-family: Diatype, Icons;
	font-style: normal;
	line-height: 1.2;	
}

/**
 * Loading Animation
 */

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

/**
 * Editor styles
 */

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

[data-predefined-style="true"] bodycopy a {
	color: rgba(0, 0, 0, 0.75);
	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 Variable", Icons;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin: 0;
	font-size: 3.2rem;
	line-height: 1;
	color: rgba(0, 0, 0, 0.75);
	font-variation-settings: 'slnt' 0, 'MONO' 0;
}

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

[data-predefined-style="true"] h2 {
	font-family: "Diatype Variable", Icons;
	font-style: normal;
	font-weight: 500;
	padding: 0;
	margin: 0;
	color: rgba(0, 0, 0, 0.75);
	font-size: 2.2rem;
	line-height: 1.2;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
	}

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

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

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

/**
 * Breakpoints
 */


[data-css-preset] .page {
    background-color: initial /*!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: 70%/*!content_right*/;
}

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


/**
 * Thumbnails
 */

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

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

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

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

[data-css-preset] [thumbnails-gutter] {
    margin: -1.5rem/*!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.0rem;
    margin-bottom: 2rem;
    font-size: 1.5rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
	font-family: Diatype, Icons;
	font-style: normal;
	line-height: 1.3;
}

.thumbnails .tags {
    margin-top: .8rem;
    margin-bottom: 1.5rem;
    font-size: 1rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.6);
	font-family: "Monument Grotesk Mono", Icons;
	font-style: normal;
	line-height: 1.2;
}

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

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

/**
 * Site Menu Button
 */

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

body.mobile #site_menu_button {
	margin: -10px;
    font-size: 32px;
}

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

#site_menu_button.active {
	display: none;
}


/**
 * 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.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: 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: Diatype, 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: Diatype, Icons;
	font-size: 1.6rem;
	line-height: 1;
	color: rgba(0, 0, 0, 0.75);
    display: block;
    margin-bottom: 1rem;
	font-style: normal;
	font-weight: 400;
}

.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.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.4;
    padding: .7rem 2.5rem 0.6rem 1rem;
	font-style: normal;
	font-weight: 400;
    color: rgba(0, 0, 0, 0.75);
}

.shop_product .button {
	font-family: Diatype, Icons;
	font-size: 1.3rem;
    background: rgba(0, 0, 0, 0.75);
    color: rgba(255,255,255,1);
    flex: 0 0 50%;
    text-align: left;
    display: inline-block;
	line-height: 1;
    padding: .8rem 1rem 0.8rem;
	font-style: normal;
	font-weight: 700;
}

/*
 * 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(255, 255, 255, 1) /*!quick_view_bgcolor*/;
}

.quick-view-caption {
	font-family: Diatype, 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.4);
    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: 0px;
}

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

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

.quick-view-navigation .close-button .outer-color {
    stroke: rgba(0, 0, 0, 0.85);
    stroke-width: 2px;
}

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

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

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

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


/**
 * 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.4rem;
    line-height: 1.3;
	font-family: Diatype, 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: 0.9rem;
    fill: rgba(0, 0, 0, 0.5);
}

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

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

/* ===== Sweet Scope Studio : navigation v9 ===== */

/* la colonne du menu doit recevoir les clics sur toutes les pages */
.page_container.overlay[local-style="38606505"] .page { pointer-events: auto; }

/* logo */
.ss-nav h1 { margin: 0 0 1rem 0; line-height: 0; }
.ss-nav h1 .ss-logo { display: block; }
.ss-nav h1 .ss-logo img { display: block; width: 100%; max-width: 18rem; height: auto; }

/* sections : une seule taille partout, entre l'accueil d'origine et la version compacte */
.ss-nav .ss-groups { border-top: 1px solid rgba(0, 0, 0, 0.6); }
.ss-nav .ss-group {
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
  padding: 0.45rem 0;
}
.ss-nav h2 {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}
.ss-nav h2 a, .ss-nav h2 span { color: rgba(0, 0, 0, 0.85); }
.ss-nav h2 a:hover { color: #f00; }

/* le + colle au mot */
.ss-nav .has-sub h2 a:after {
  content: "+";
  display: inline-block;
  margin-left: 0.4em;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease;
}
.ss-nav .is-open h2 a:after { transform: rotate(45deg); }

/* sous-menu : ferme, s'ouvre au clic sur le titre */
.ss-nav .ss-sub {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-left: 1.7rem;
  transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
}
.ss-nav .ss-sub a, .ss-nav .ss-sub span {
  display: block;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.75);
}
.ss-nav .ss-sub span { color: rgba(0, 0, 0, 0.35); }
.ss-nav .ss-sub a:hover, .ss-nav .ss-sub a.active { color: #f00; }
.ss-nav .is-open > .ss-sub {
  max-height: 40rem;
  opacity: 1;
  padding-top: 0.35rem;
  padding-bottom: 0.15rem;
}

/* colonne du menu a 21 % sur toutes les pages, contenu a 79 % sur les pages interieures */
.page_container.overlay[local-style="38606505"] > .page { max-width: 21%; }
body:not(.homepage) .content_container .container_width { width: 79%; }

/* niveau imbrique (ex. leaning sounds) : pas de filet, meme taille que les sous-entrees */
.ss-nav .ss-sub .ss-group { border: 0; padding: 0; }
.ss-nav .ss-sub .ss-group h2 { font-size: 1.9rem; font-weight: 700; line-height: 1.2; }
.ss-nav .ss-sub .ss-group h2 a { color: rgba(0, 0, 0, 0.75); }
.ss-nav h2 a.active, .ss-nav .ss-sub .ss-group h2 a.active { color: #f00; }
.ss-nav .ss-sub .ss-sub { padding-left: 1.7rem; }

/* pages index : vignettes toutes au format 3:2 */
bodycopy a.ss-thumb, .ss-thumb { display: block; position: relative; padding-bottom: 66.66% !important; overflow: hidden; }
.ss-thumb img { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover; }

/* page about : bloc coordonnees a la taille du texte courant */
.ss-contact { margin: 1.5rem 0 2rem 0; line-height: 1.5; }
.ss-contact a { color: rgba(0, 0, 0, 0.75); }
.ss-contact a:hover { color: #f00; }

/* ===== accueil : l'ondulation Cargo est remplacee par la notre ===== */
[data-backdrop="ripple"] .displacement_canvas { display: none; }
[data-backdrop="ripple"] canvas.ss-ripple {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
}

/* pages video (sound design) : cadres 16:9 et carte instagram */
.ss-video { position: relative; width: 100%; padding-bottom: 56.25%; overflow: hidden; }
.ss-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.ss-video-ig { padding-bottom: 125%; }

/* ===== mobile : logo dans l'en-tete, menu deroulant (page Mobile nav) ===== */
.ss-mlogo { display: block; width: 62%; max-width: 16rem; margin: 0.2rem 0 0.3rem 0; }
.ss-mlogo img { display: block; width: 100%; height: auto; }
.mobile [local-style="38606506"] hr { display: none; }
.ss-mnav { margin-top: 0; }
.ss-mnav a { display: block; text-decoration: none; border: 0; color: rgba(0, 0, 0, 0.85); font-size: 2rem; font-weight: 700; line-height: 1.25; }
.ss-mnav a:hover, .ss-mnav a.active { color: #f00; }
.ss-mnav > .ss-mgroup { border-bottom: 1px solid rgba(0, 0, 0, 0.6); padding: 0.55rem 0; }
.ss-mhead { display: flex; align-items: baseline; justify-content: space-between; }
.ss-mhead a { flex: 1; }
.ss-mtoggle { display: inline-block; padding: 0 0.6rem; font-size: 2.2rem; font-weight: 300; line-height: 1.1; color: rgba(0, 0, 0, 0.4); transition: transform 0.3s ease; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ss-mgroup.is-open > .ss-mhead .ss-mtoggle { transform: rotate(45deg); }
.ss-mgroup > .ss-msub { display: none; padding-left: 1.7rem; padding-top: 0.25rem; }
.ss-mgroup.is-open > .ss-msub { display: block; }
.ss-msub a { color: rgba(0, 0, 0, 0.75); }
.ss-msub .ss-mgroup { padding: 0; }

/* ===== accueil sur telephone : image plein ecran, logo par-dessus, pas de defilement ===== */
/* accueil fixe : pas de defilement pour le visiteur, mais la page est posee 100 px plus bas par le script,
   pour que le haut de la photo passe derriere l'heure et le bas derriere la barre d'adresse */
body.mobile.homepage { overflow: hidden; overscroll-behavior: none; }
body.mobile.homepage .ss-scroll-spacer { height: 120px; width: 100%; }
/* le logo reste en place pendant ce petit defilement */
.mobile.homepage .page_container.overlay[local-style="38606506"] { position: fixed !important; }
.mobile.homepage .page_container.overlay,
.mobile.homepage .page_container.overlay .page,
.mobile.homepage .page_container.overlay .page_background,
.mobile.homepage .page_container.overlay .page_content { background: transparent !important; }
/* le canvas deborde de 160 px en haut et en bas : Safari montre cette zone derriere l'heure et la pastille d'adresse quand ses barres sont repliees */
/* la photo fait partie de la page (pas fixe) et depasse la fenetre de 200 px vers le bas : quand on glisse,
   la partie passee au-dessus apparait derriere l'heure et la partie du dessous derriere la pastille d'adresse */
.mobile.homepage canvas.ss-ripple { position: absolute !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: calc(100vh + 200px) !important; z-index: 0; }
body.mobile.homepage { background: #000; }
/* la page s'etend sous la barre d'etat : on decale l'en-tete et le bouton + de la hauteur de cette barre */
.mobile .page_container.overlay[local-style="38606506"] { padding-top: env(safe-area-inset-top, 0px); }
.mobile #site_menu_button { top: calc(0.9rem + env(safe-area-inset-top, 0px)) !important; }