.gray-text {
  color: rgba(0, 0, 0, 0,83);
        -webkit-transition: color 1s;
    transition: color 1s;
}
.gray-text:hover {
  color: rgba(255, 229, 0, 1);
}
.museu-text {
 color: rgba(0, 0, 0, 0.83);
        -webkit-transition: color 1s;
    transition: color 1s;
}
.museu-text:hover {
   color: rgba(107, 181, 45, 1);
}
.formation-text {
 color: rgba(255, 255, 255, 0.83);
        -webkit-transition: color 1s;
    transition: color 1s;
}
.formation-text:hover {
   color: rgba(43, 13, 190, 1);
}
.viveiro-text {
 color: rgba(255, 255, 255, 0.83);
        -webkit-transition: color 1s;
    transition: color 1s;
}
.viveiro-text:hover {
   color: rgba(101, 59, 163, 1);
}
.derivas-text {
 color: rgba(255, 255, 255, 0.83);
        -webkit-transition: color 1s;
    transition: color 1s;
}
.derivas-text:hover {
   color: rgba(0, 255, 62, 1);
}
/* 
  You want a simple and fancy tooltip?
  Just copy all [data-tooltip] blocks:
*/
[data-tooltip] {
  position: relative;
  z-index: 10;
}

/* Positioning and visibility settings of the tooltip */
[data-tooltip]:before,
[data-tooltip]:after {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  left: 50%;
  bottom: calc(80% + 5px); /* 5px is the size of the arrow */
  pointer-events: none;
  transition: 0.5s;
  will-change: transform;
}

/* The actual tooltip with a dynamic width */
[data-tooltip]:before {
  content: attr(data-tooltip);
  padding: 10px 18px;
  min-width: 50px;
  max-width: 300px;
  width: inherit;
  width: -moz-max-content;
  border-radius: 6px;
  font-size: 14px;
  background-color: rgba(15, 159, 248, 0.9);
  background-image: linear-gradient(30deg,
    rgba(59, 72, 80, 0.44),
    rgba(59, 68, 75, 0.44),
    rgba(60, 82, 88, 0.44));
  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);
  color: #fff;
  text-align: left   ;
  transform: translate(-50%, -5px) scale(0.5);
}

/* Tooltip arrow */
[data-tooltip]:after {
  content: '';
  border-style: solid;
  border-width: 5px 5px 0px 5px; /* CSS triangle */
  border-color: rgba(55, 64, 70, 0.9) transparent transparent transparent;
  transition-duration: 0s; /* If the mouse leaves the element, 
                              the transition effects for the 
                              tooltip arrow are "turned off" */
  transform-origin: top;   /* Orientation setting for the
                              slide-down effect */
  transform: translateX(-50%) scaleY(0);
}

/* Tooltip becomes visible at hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  opacity: 1;
}
/* Scales from 0.5 to 1 -> grow effect */
[data-tooltip]:hover:before {
  transition-delay: 0.3s;
  transform: translate(-50%, -5px) scale(1);
}
/* 
  Arrow slide down effect only on mouseenter (NOT on mouseleave)
*/
[data-tooltip]:hover:after {
  transition-delay: 0.5s; /* Starting after the grow effect */
  transition-duration: 0.2s;
  transform: translateX(-50%) scaleY(1);
}
/*
  That's it for the basic tooltip.

  If you want some adjustability
  here are some orientation settings you can use:
*/

/* LEFT */
/* Tooltip + arrow */
[data-tooltip-location="left"]:before,
[data-tooltip-location="left"]:after {
  left: auto;
  right: calc(100% + 5px);
  bottom: 50%;
}

/* Tooltip */
[data-tooltip-location="left"]:before {
  transform: translate(-5px, 50%) scale(0.5);
}
[data-tooltip-location="left"]:hover:before {
  transform: translate(-5px, 50%) scale(1);
}

/* Arrow */
[data-tooltip-location="left"]:after {
  border-width: 5px 0px 5px 5px;
  border-color: transparent transparent transparent rgba(55, 64, 70, 0.9);
  transform-origin: left;
  transform: translateY(50%) scaleX(0);
}
[data-tooltip-location="left"]:hover:after {
  transform: translateY(50%) scaleX(1);
}



/* RIGHT */
[data-tooltip-location="right"]:before,
[data-tooltip-location="right"]:after {
  left: calc(100% + 5px);
  bottom: 50%;
}

[data-tooltip-location="right"]:before {
  transform: translate(5px, 50%) scale(0.5);
}
[data-tooltip-location="right"]:hover:before {
  transform: translate(5px, 50%) scale(1);
}

[data-tooltip-location="right"]:after {
  border-width: 5px 5px 5px 0px;
  border-color: transparent rgba(55, 64, 70, 0.9) transparent transparent;
  transform-origin: right;
  transform: translateY(50%) scaleX(0);
}
[data-tooltip-location="right"]:hover:after {
  transform: translateY(50%) scaleX(1);
}



/* BOTTOM */
[data-tooltip-location="bottom"]:before,
[data-tooltip-location="bottom"]:after {
  top: calc(100% + 5px);
  bottom: auto;
}

[data-tooltip-location="bottom"]:before {
  transform: translate(-50%, 5px) scale(0.5);
}
[data-tooltip-location="bottom"]:hover:before {
  transform: translate(-50%, 5px) scale(1);
}

[data-tooltip-location="bottom"]:after {
  border-width: 0px 5px 5px 5px;
  border-color: transparent transparent rgba(55, 64, 70, 0.9) transparent;
  transform-origin: bottom;
}



/* Settings that make the pen look nicer */
html {
  width: 100%;
  height: 100%;
  font-family: 'Roboto', sans-serif;
  font-size: 1.2em;
  animation: moveFocus 5s ease infinite alternate;
}
@keyframes moveFocus { 
  0%   { background-position: 0% 100% }
  100% { background-position: 100% 0% }
}

body {
  background: none;    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
}

main {
  padding: 0 4%;
  display: flex;
  flex-direction: row;
  margin: auto 0;
}

button {
  margin: 0;
  padding: 0.7rem 1.4rem;

  cursor: pointer;
  text-align: center;
  border: none;
  border-radius: 4px;
  outline: inherit;
  text-decoration: none;
  font-family: Roboto, sans-serif;
  font-size: 0.7em;
  background-color: rgba(174, 184, 192, 0.55);
  color: white;

  -webkit-appearance: none;
  -moz-appearance: none;
  transition: background 350ms ease-in-out, 
              transform 150ms ease;
}
button:hover {
  background-color: #484f56;
}
button:active {
  transform: scale(0.98);
}
button:focus {
  box-shadow: 0 0 2px 2px #298bcf;
}
button::-moz-focus-inner {
  border: 0;
}
/*
.example-elements {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  text-align: center;
  padding-right: 4%;
}

.example-elements p {
  padding: 6px;
  display: inline-block;
  margin-bottom: 5%;
  color: #fff;
}
.example-elements p:hover {
  border-left: 1px solid lightgrey;
  border-right: 1px solid lightgrey;
  padding-left: 5px;
  padding-right: 5px;
}

.example-elements a {
  margin-left: 6px;
  margin-bottom: calc(5% + 10px);
  color: #76daff;
  text-decoration: none;
}
.example-elements a:hover {
  margin-bottom: calc(5% + 9px);
  border-bottom: 1px solid #76daff;
}

.example-elements button {
  margin-bottom: 20px;
}
*/
.info-wrapper {
  flex-grow: 8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: justify;
  padding-left: 6%;
  border-left: 3px solid #35ea95;
}

.info-wrapper p {
  color: rgba(255, 255, 255, 0.69);
}
.info-wrapper p {
  max-width: 600px;
  text-align: justify;
}

.info-wrapper .title-question {
  display: block;
  color: #fff;
  font-size: 1.36em;
  font-weight: 500;
  padding-bottom: 24px;
}


@media (max-height: 450px) {
  main {
    margin: 2rem 0;
  }
}

@media (max-width: 800px) {
  html {
    font-size: 0.9em;
  }
}

/* Thumbnail settings */
@media (max-width: 750px) {
  html {
    animation-duration: 0.6s;
    font-size: 1em;
  }
  body {
    display: flex;
    background: none;
    height: 100%;
    margin: 0px;
  }
  main {
    font-size: 1.1em;
    padding: 6%;
  }
  .info-wrapper p:before,
  .info-wrapper p:after {
    display: none;
  }
/*
  .example-elements {
    max-width: 150px;
    font-size: 22px;
  }
  .example-elements a, button {
    display: none;
  }
  .example-elements p:before, 
  .example-elements p:after {
    visibility: visible;
    opacity: 1;
  }
  .example-elements p:before {
    content: "Tooltip";
    font-size: 20px;
    transform: translate(-50%, -5px) scale(1);
  }
  .example-elements p:after {
    transform: translate(-50%, -1px) scaleY(1);
  }
  */
  
  [data-tooltip]:after {
    bottom: calc(100% + 3px);
  }
  [data-tooltip]:after {
    border-width: 7px 7px 0px 7px;
  }
}

/**
* infos bulle
*/
section {
  max-width: 700px;
  margin: 50px auto;
  padding: 50px 100px;
  background: #f00;
}



.note {    
    color: #d0745f;
    cursor: pointer;
    border-bottom: 1px dotted #d0745f;
}



/* This is the default Tooltipster theme (feel free to modify or duplicate and create multiple themes!): */
/*.tooltipster-default {
	border-radius: 1px; 
	border: 1px solid #eee;
 
	background: #fff;
	color: #222;
}*/

/* Use this next selector to style things like font-size and line-height: */
.tooltipster-default .tooltipster-content {
	font: 16px/24px "ariel", serif;
	
	padding: 1em 1em 1em 1em;
	overflow: hidden;
 border-left: 5px solid #d0745f;
}

/* This next selector defines the color of the border on the outside of the arrow. This will automatically match the color and size of the border set on the main tooltip styles. Set display: none; if you would like a border around the tooltip but no border around the arrow */
.tooltipster-default .tooltipster-arrow .tooltipster-arrow-border {
	/* border-color: ... !important; */
}


/* If you're using the icon option, use this next selector to style them */
.tooltipster-icon {
	cursor: help;
	margin-left: 4px;
}

/* This is the base styling required to make all Tooltipsters work */
.tooltipster-base {
	padding: 0;
	font-size: 0;
	line-height: 0;
	position: absolute;
	z-index: 9999999;
	pointer-events: none;
	width: auto;
	overflow: visible;
}
.tooltipster-base .tooltipster-content {
	overflow: hidden;
}


/* These next classes handle the styles for the little arrow attached to the tooltip. By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */
.tooltipster-arrow {
	display: block;
	text-align: center;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.tooltipster-arrow span, .tooltipster-arrow-border {
	display: block;
	width: 0; 
	height: 0;
	position: absolute;
}
.tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span {
	border-left: 8px solid transparent !important;
	border-right: 8px solid transparent !important;
	border-top: 8px solid;
	bottom: -8px;
}
.tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border {
	border-left: 9px solid transparent !important;
	border-right: 9px solid transparent !important;
	border-top: 9px solid;
	bottom: -8px;
}

.tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span {
	border-left: 8px solid transparent !important;
	border-right: 8px solid transparent !important;
	border-bottom: 8px solid;
	top: -8px;
}
.tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
	border-left: 9px solid transparent !important;
	border-right: 9px solid transparent !important;
	border-bottom: 9px solid;
	top: -8px;
}
.tooltipster-arrow-top span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom .tooltipster-arrow-border {
	left: 0;
	right: 0;
	margin: 0 auto;
}
.tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span {
	left: 6px;
}
.tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
	left: 5px;
}
.tooltipster-arrow-top-right span,  .tooltipster-arrow-bottom-right span {
	right: 6px;
}
.tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border {
	right: 5px;
}
.tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border {
	border-top: 8px solid transparent !important;
	border-bottom: 8px solid transparent !important; 
	border-left: 8px solid;
	top: 50%;
	margin-top: -7px;
	right: -8px;
}
.tooltipster-arrow-left .tooltipster-arrow-border {
	border-top: 9px solid transparent !important;
	border-bottom: 9px solid transparent !important; 
	border-left: 9px solid;
	margin-top: -8px;
}
.tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border {
	border-top: 8px solid transparent !important;
	border-bottom: 8px solid transparent !important; 
	border-right: 8px solid;
	top: 50%;
	margin-top: -7px;
	left: -8px;
}
.tooltipster-arrow-right .tooltipster-arrow-border {
	border-top: 9px solid transparent !important;
	border-bottom: 9px solid transparent !important; 
	border-right: 9px solid;
	margin-top: -8px;
}


/* Some CSS magic for the awesome animations - feel free to make your own custom animations and reference it in your Tooltipster settings! */

.tooltipster-grow {
	-webkit-transform: scale(0,0);
	-moz-transform: scale(0,0);
	-o-transform: scale(0,0);
	-ms-transform: scale(0,0);
	transform: scale(0,0);
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	-ms-transition-property: -ms-transform;
	transition-property: transform;
	-webkit-backface-visibility: hidden;
}
.tooltipster-grow-show {
	-webkit-transform: scale(1,1);
	-moz-transform: scale(1,1);
	-o-transform: scale(1,1);
	-ms-transform: scale(1,1);
	transform: scale(1,1);
	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
	-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
	-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
	-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}



/* CSS transition for when contenting is changing in a tooltip that is still open */
.tooltipster-content-changing {
	-webkit-transform: scale(1.1, 1.1);
	-moz-transform: scale(1.1, 1.1);
	-o-transform: scale(1.1, 1.1);
	-ms-transform: scale(1.1, 1.1);
	transform: scale(1.1, 1.1);
}


/**
* infos bulle
*/
.tooltip {
        position: relative;
    display: inline-block;
    border-bottom: 1px dotted #10a4b5;
}

.tooltip .tooltiptext {
    	font-size: 1rem;

   visibility: hidden;
    width: 220px;
    background-color: rgba(255, 0, 0, 1);
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 41px 5;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;

}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
    /**
*
*/

#one:hover {
	 opacity: 0;
}
    /**
* css
*/
.spotlight {
position: fixed;
width: 100%;
height: 100%;
pointer-events: none;
background-image: radial-gradient(circle, transparent 160px, rgba(0, 0, 0, 0.85)
500px);
}


/* post it  */
.postit1_handle {
    background: transparent;
    color: #000;
}

[data-postit1] .postit1_handle > a {
    color:#de5555;
    display: inline-block;
    padding: 0.1rem 0.0rem 0rem 0.35rem; 
}



/* test post it */
.div-1 {
        background-color: #ed3131;
    }
    
    .div-2 {
    	background-color: #ABBAEA;
    }
    
    .div-3 {
    	background-color: #FBD603;
    }

/* clik hiden */

#cont {display: none; }
.show:focus + .hide {display: inline; }
.show:focus + .hide + #cont {display: block;}
.page a.active {
	color: #b800ff;
}


/* fond de l'audio */
.color{
    background-color: #70c760;

            }

/* full iframe*/
.embed-container {
position: relative;
padding-bottom: 70.41%;
height: 15;
overflow: hidden;
        mix-blend-mode: difference;
background-blend-mode: difference;
}
.embed-container iframe {
position: absolute;
top:-0;
left: 0;
width: 123%;
height: 106%;
        mix-blend-mode: difference;
background-blend-mode: difference;
}

/* txt logo*/
.cycle_content {
    opacity: 1;
    white-space: nowrap;
    display: inline-block;
   pointer-events: none;
    color: #29cd82;
}
 
.cycle_container {
    position: fixed;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 58%;
    font-size: 3rem;
    line-height: 1 !important;
}


/* élément rollover */
.draggable_handle {
    background: #ff9100;
    color: #fff;
    mix-blend-mode: difference;
background-blend-mode: difference;

}

[data-draggable] .draggable_handle > a {
    color:white;
    display: inline-block;
    padding: 0rem 0.0rem 0rem 0rem; 
}

/* image rollover */
.hover-title {
    display: inline;
    pointer-events: auto;
    cursor: pointer;	
    mix-blend-mode: difference;

}

.hover-image {
    visibility: hidden;
    mix-blend-mode: difference;
        background-repeat: repeat;


 
}

body:not(.mobile) .hover-title:hover + .hover-image {
    visibility: visible;
    pointer-events: none;
    mix-blend-mode: difference;
        background-repeat: repeat;


}

.hover-image {
  display: flex;
    position: fixed;
    top: 50%;
    left: 50%;/* 
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;*/
    background-repeat: repeat;
    mix-blend-mode: difference;

/* Change width and height to scale images */
    width: 70vw;
    height: 70vh;
}

.hover-image img {
    max-width: 150% !important;
    max-height: 150% !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 0;
    mix-blend-mode: difference;
        background-repeat: repeat;


}


/* Normal weight; Normal style */
@font-face {
    font-family: 'Amsterdam-Superstar';
    src: url('https://files.cargocollective.com/c1359613/Amsterdam-Superstar.ttf') format('truetype');
}
body {
  font-family: "Amsterdam-Superstar", serif;
    
}

.gallery_pig {
mix-blend-mode: exclusion;
    border: 1px solid transparent;
}


body::-webkit-scrollbar { 
    display: none; 
  width: 1em;
    overflow: hidden;
    box-shadow: inset 0 0 6px transparent;
}
 
body::-webkit-scrollbar-track {
    display: none; 
        overflow: hidden;
  box-shadow: inset 0 0 6px transparent;
}
 
body::-webkit-scrollbar-thumb {
    display: none; 
  background-color: #ff9d00;
        overflow: hidden;
  outline: 0px solid transparent;

}

/**
 * objet volant
 */ 
.flier {
	pointer-events: none;
}

.flier > * {
/* Adjust animation duration to change the element’s speed */
        animation: fly 500s linear infinite;
        pointer-events: none !important;
	top: 0;
	left: 0;
	transform: translateX(-120%) translateY(-120%) rotateZ(0);
	position: fixed;
	animation-delay: 1s;
	z-index: 999999;
}

 /* Keyframe values control where the element will begin
    and end its trajectory across the screen. Each rule
    represents a path the element follows across the screen. */


@keyframes fly {

	98.001%, 0% {
                display: block;
		transform: translateX(-200%) translateY(100vh) rotateZ(0deg)
	}

	15% {
		transform: translateX(100vw) translateY(-100%) rotateZ(180deg)
	}

	15.001%, 18% {
		transform: translateX(100vw) translateY(-30%) rotateZ(0deg)
	}

	40% {
		transform: translateX(-200%) translateY(3vh) rotateZ(-180deg)
	}

	40.001%, 43% {
		transform: translateX(-200%) translateY(-100%) rotateZ(-180deg)
	}

	65% {
		transform: translateX(100vw) translateY(50vh) rotateZ(0deg)
	}

	65.001%, 68% {
		transform: translateX(20vw) translateY(-200%) rotateZ(180deg)
	}

	95% {
		transform: translateX(10vw) translateY(100vh) rotateZ(0deg)
	}
}

/**
 * ombre
 */
.content img { 
    box-shadow: 5px 5px 35px rgba(0,0,0,0.3); 
    mix-blend-mode: difference;
}

[image-gallery="slideshow"] .gallery_card {
    padding: 35px 35px 35px 35px;
    
}

.no-shadow img {
    box-shadow: none !important;
}

/**
 * Content
 */

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

a:active {
	opacity: 10.7;
    	color: #fae3de;
}

.page a.active {
	color: rgba(0, 255, 62, 1);
}

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;
    mix-blend-mode: difference;
background-blend-mode: difference;
}

ul,
ol {
	margin: 0;
	padding: 0 0 0 2rem;
}

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

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

.content img {
	float: none;
	margin-bottom: 0.5rem;
    box-shadow: 12px 12px 80px transparent;
    vertical-align: bottom;
    mix-blend-mode: difference;
background-blend-mode: difference;
  }

.no-shadow img {
    box-shadow: none !important;
}

.gallery_image_caption {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
	font-weight: 400;
	color: rgba(24, 24, 24, 0.6);
	font-family: "Neue Haas Grotesk", Icons;
	font-style: normal;
	line-height: 1.3;
    text-align: left;


}

/**
 * Loading Animation
 */

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

/**
 * Editor styles
 */

[data-predefined-style="true"] bodycopy {
	font-size: 1.5rem;
	font-weight: 400;
color: rgba(67, 67, 67, 1);
    font-family: "Neue Haas Grotesk", Icons;
	font-style: normal;
	line-height: 1.5;
    letter-spacing: 0.05rem;

}

[data-predefined-style="true"] bodycopy a {
	color: rgba(0, 0, 0, 0.85);
	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: "Amsterdam-Superstar", serif;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin: 0;
	font-size: 5.8rem;
	line-height: 1.1;
	color: rgba(0, 0, 0, 0.85);
	    letter-spacing: 0.075em;
}

[data-predefined-style="true"] h1 a {
	color: #2351fc;
}

[data-predefined-style="true"] h2 {
	font-family: "Neue Haas Grotesk", Icons;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin: 0;
	color: #ffe500;
	font-size: 1.5rem;
	line-height: 1.5;
    letter-spacing: 0.05em;
}

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

[data-predefined-style="true"] small {
	display: inline-block;
	font-size: 11.3rem;
	line-height: 1.4;
  font-family: "Amsterdam-Superstar", serif;
	font-weight: bold;
	color: rgba(242, 163, 0, 0.85);
    
}
   

[data-predefined-style="true"] small a {
	color: rgba(0, 0, 0, 0.85);
	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: justify;
    
}

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

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

[data-css-preset] .content_padding {
	padding-top: 9.3rem /*!main_margin*/;
	padding-bottom: 9.3rem /*!main_margin*/;
	padding-left: 9.3rem /*!main_margin*/;
	padding-right: 9.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: 0.8rem/*!thumbnails_padding*/;
}

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

.thumbnails .tags {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.4);
	font-family: "Neue Haas Grotesk", Icons;
	font-style: normal;
	line-height: 1.3;
}

.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, 255, 62, 1);
	line-height: 1;
	font-size: 58px /*!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*/;
    rotation: 45;
    	font-weight: bold;

}

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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	background: rgba(43, 13, 190, 1);
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
    	line-height: 2.85em;
	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: 2.5rem /*!shop_button*/;
	right: 3rem /*!shop_button*/;
}

#shop_button.text {
    font-family: "Neue Haas Grotesk", Icons;
	font-size: 2.8rem;
    padding: 0;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
	font-style: normal;
    line-height: 1.2;
}

#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: "Neue Haas Grotesk", Icons;
	font-size: 1.8rem;
	line-height: 1;
	color: rgba(0, 0, 0, 0.85);
    display: block;
    margin-bottom: 1rem;
	font-style: normal;
	font-weight: 400;
}

.shop_product .dropdown {
    font-family: "Neue Haas Grotesk", Icons;
    font-size: 1.8rem;
    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 3rem .7rem 1rem;
	font-style: normal;
	font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
}

.shop_product .button {
    font-family: "Neue Haas Grotesk", Icons;
	font-size: 1.8rem;
    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;
	font-style: normal;
	font-weight: 400;
}

/**
 * Image Zoom
 */

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

/**
 * Quick View
 */

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

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


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

.quick-view-caption {
    font-family: "Neue Haas 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.3rem;
	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.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: 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: 26rem;
    height: 3.3rem;
    outline: 1px solid rgba(0,0,0,0.15);
    color: rgba(25, 242, 78, 1);
    background: #2b0dbe;
    font-size: 1.2rem;
    line-height: 1.3;
    font-family: "Neue Haas 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;
}

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

/**
 * Make Something Draggable
 * See more at: https://support.cargo.site/Make-Something-Draggable
 **/

.draggable_element {
	cursor: move;
}

/** chat box
**/

.chat {
    background:white;
    border: 1px solid black;
    display:none;
    position: relative;
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
}

.chat.initialized {
    display: flex;
}

.chat .chat_wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 70%;
}

.chat .chat_interior {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.chat .chat_output {
    flex-grow: 2;
    overflow-y: auto;
    padding: 1rem;
    display:flex;
    flex-direction:column;
}

.chat .input_area {
    border-top:1px solid black;
    flex-shrink: 0;
    line-height: 3.4rem;
    display: flex;
}

.chat input {
    display:block;
    font:inherit;
    height: 100%;
    width: 50%;
    border:0;
    margin:0;
    padding: 0 1rem;
    flex-grow: 1;
}

.input_area .send_button {
    background: white; 
    display:block;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: 1px solid black;
    font:inherit;
    height: 100%;
    padding: 0 1rem;
}

.input_area .send_button:after {
    content: "SEND"
}

.chat .agent.waiting {
    color: transparent;
}

.chat .agent.waiting div {
    background-color: rgba(0,0,0,0);
    display:inline-block;
    margin: 0 .3em 0.1em 0;
    width: .4em;
    height: .4em;
    border-radius: 100%;
}

.chat .agent.waiting div:nth-child(1) {
    animation: pulse 1s linear .2s infinite;
}

.chat .agent.waiting div:nth-child(2) {
    animation: pulse 1s linear .4s infinite;
}

.chat .agent.waiting div:nth-child(3){
    margin-right: 0;
    animation: pulse 1s linear .6s infinite;
}

.chat .agent {
    text-align:left;
    margin-right: auto;
    max-width: 75%;
    padding: 0.45rem 0.75rem .5rem;
    background: #eee;
    display:inline-block;
}

.chat .user {
    text-align:right;
    margin-left: auto;
    max-width: 75%;
    padding: 0.45rem 0.75rem .5rem;
    display: inline-block;
    border: 1px solid #ccc; 
}

.chat .user+.user {
    margin-top: 0.3em;
}

.chat .agent+.agent {
    margin-top: 0.3em;
}

.chat .user+.agent {
    margin-top: 1em;
}

.chat .agent+.user {
    margin-top: 1em;
}
 
.chat_end {
    font-size: 0.8em;
    opacity: 0.5;
    text-align: center;
    margin-top: 2em;
}

.chat .chat_end:after {
    content: "This chat has ended.";
}

.chat .disabled {
    pointer-events:none;
    color: rgba(0, 0, 0, 0.4);
}
 
@keyframes pulse {

 0% {
    background-color: rgba(0,0,0,0);
 }

 50% {
    background-color: rgba(0,0,0,0.3);
 }

 100% {
    background-color: rgba(0,0,0,0);
 }

}