/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/****************************************************************/
/****************************************************************/



body {
  background: black;
  width:100%;
  height:100%;
	overflow: hidden;
	font-family: 'Space Mono', monospace;
}

i {
	font-style: italic;
}

strong {
	font-weight: 700;
}

body.sea-level {
	background: white;
}

.mousecursor {
	position: absolute;
	width: 10px;
	height: 10px;
	top: 0;
	left: 0;
	pointer-events: none;
	border:2px solid #ffffff;
	border-radius: 10px;
	opacity: 0;
}

body.sea-level .mousecursor{
	border-color:#000000;
}

.content-wrapper,
.content{
	position: absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	overflow: hidden;
}

.content{
	cursor: none;
}

.about{
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #efefef;
	transform: skewY(10deg);
	z-index: 500;
	margin-top: 100%;
  text-align: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
	margin-top: 100%;
}

.content-wrapper,
.about{
	transition:top 0.9s cubic-bezier(0.785, 0.135, 0.150, 0.860), transform 0.95s cubic-bezier(0.785, 0.135, 0.150, 0.860), margin-top 0.9s cubic-bezier(0.785, 0.135, 0.150, 0.860);
}

body.ab .about{
	top:0;
	margin-top: 0;
	transform: skewY(0);
}

body.ab .content-wrapper{
	top:-100%;
}

body.ab .ab-tracklist{
	margin-top: 0;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
		width:100%;
    height:100%;
		visibility: hidden;
}

video {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 0;
    display: none;
}

.about-point{
	position: absolute;
	top:20px;
	right:20px;
	padding: 10px;
	width:21px;
	height:47px;
	cursor:pointer;
	z-index: 991;
}

.close-about-btn {
	position: absolute;
	top:20px;
	right:25px;
	padding: 10px;
}

.close-about-btn svg {
	fill: #000;
}

.about-point svg{
	fill:#ffffff;
	transition: fill 1s linear;
}

.roll-exp {
	position: absolute;
	height: 10px;
	width: 10px;
	border-radius: 50%;
	margin-top: 5px;
	pointer-events: none;
	border: 3px solid #000;
	opacity: 0;
}

.audio-player-bar{
	position: absolute;
	background: #000;
	height: 10px;
	margin-top: 5px;
	left: 0;
	pointer-events: none;
}

.next-btn {
	display: block;
	position: absolute;
	bottom: 20px;
	left: 20px;
	color: #fff;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 0.8em;
	text-decoration: none;
	padding: 10px;
}

.extract-preloader,
.preloader {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -6px;
	margin-top: 70px;
  border-radius: 100%;
  border: 4px solid #fff;
  border-bottom-color: transparent;
  height: 12px;
  width: 12px;
  display: inline-block;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s linear, visibility 0s linear 0.3s;
	pointer-events: none;
}

.extract-preloader{
	margin-left: -3px;
	margin-top: 6px;
	height: 6px;
  width: 6px;
	border: 2px solid #000;
  border-bottom-color: transparent;
}

.ghost-dance .preloader {
	margin-left: 56px;
	margin-top: 90px;
}

.liasse .preloader {
	margin-top: -36px;
	margin-left: -2px;
}

.les-fleurs .preloader {
	margin-top: -10px;
}

.sea-level .preloader {
	margin-top: -25px;
	margin-left: 80px;
}

.extract-preloader.show,
.preloader.show {
	-webkit-animation: rotate .3s 0s linear infinite;
	animation: rotate .3s 0s linear infinite;
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

@-webkit-keyframes rotate {
  from{
      -webkit-transform: rotate(0deg);
  }
  to{
      -webkit-transform: rotate(360deg);
  }
}

body.sea-level .next-btn {
	color: #000;
}

body.sea-level .preloader {
	border: 4px solid #000;
	border-bottom-color: transparent;
}

.audio-player-bar div{
	width:100%;
	height:100%;
	background: #fff;
	transform-origin: left top;
}

.ab-main-visual{
	position: relative;
	width: 500px;
	height: 500px;
	float: left;
}

.ab-main-visual svg{
	position: absolute;
	top: 60px;
  left: 9px;
  transform-origin: top left;
  transform: scale(1.7);
	fill: none;
	opacity: 0;
	transition: opacity 0.9s linear;
}

.ab-main-visual svg.show {
	opacity: 1;
}

.ab-main-visual svg path{
	stroke: #ffffff;
	stroke-width: 4px;
}

.ab-tracklist{
	position: relative;
	width: 220px;
	margin-left: 20px;
	float: left;
	height: 500px;
	margin-top: 80px;
	transition: margin-top 1.1s ease-out;
}
.ab-tracklist .about-text{
	font-size: 0.7em;
	line-height: 1.1;
}

.ab-tracklist .about-text.contact-text{
	font-size: 1em;
	margin-bottom: 15px;
}

.ab-tracklist li {
	font-size: 19px;
  margin-bottom: 4px;
  font-weight: 700;
	margin-left: 1px;
}

.ab-tracklist li a {
	text-decoration: none;
	color: #000000;
}

.ab-tracklist a{
	display: inline-block;
}

.ab-tracklist a:after {
	position: relative;
	left: 0;
	bottom: 0;
	content:" ";
	display: block;
	width: 100%;
	height:2px;
	background: #000;
	opacity: 0;
	transition: opacity 0.3s linear;
}

.ab-tracklist a:hover:after {
	opacity: 1;
}

.ab-tracklist ul {
	margin-top: 30px;
}

.ab-tracklist .contact{
	position: absolute;
	bottom: 0;
}

.about-text a{
	text-decoration: none;
	color: #000;
	font-weight: 700;
}

.about content {
	display: inline-block;
  text-align: left;
  width: 740px;
}

body.sea-level .about-point svg{
	fill:#000000;
}

body.sea-level .svg-title path{
	stroke: #000000;
}

.nav-btn{
	position: absolute;
	top:20px;
	display: block;
	border: none;
	 background: none;
	 z-index: 990;
}

.svg-title{
	position:absolute;
	z-index:100;
	left:50%;
	top:50%;
	pointer-events: none;
	visibility: hidden;
}

.ghost-dance .svg-title{
	width:282px;
	height:210px;
	margin-left:-141px;
	margin-top:-105px;
}

.liasse .svg-title{
	width:258px;
	height:149px;
	margin-left:-129px;
	margin-top:-75px;
}

.les-fleurs .svg-title{
	width:327px;
	height:142px;
	margin-left:-164px;
	margin-top:-121px;
}

.sea-level .svg-title{
	width:315px;
	height:174px;
	margin-left:-157px;
	margin-top:-87px;
}

.aglaope .svg-title{
	width:358px;
	height:211px;
	margin-left:-179px;
	margin-top:-105px;
}

.snake .svg-title{
	width:231px;
	height:171px;
	margin-left:-115px;
	margin-top:-140px;
}

.svg-title path{
	stroke-miterlimit:10;
	stroke: #ffffff;
	stroke-width: 5px;
	fill: none;
}

.intro-help {
	position: absolute;
	width: 300px; height: 80px;
	margin-left: -150px;
	bottom: 50px;
	left: 50%;
	pointer-events: none;
	color:#ffffff;
	font-size: 11px;
	line-height: 18px;
	opacity: 0;
	text-align: center;
	/*font-weight: bold;*/
}

.intro-help h5{
	text-shadow: 0px 0px 5px #000000;
}

.tooltip1 div{
	position: absolute;
	width: 8px;
	height: 8px;
	top: 80%;
	left: 50%;
	margin-left: -4px;
	margin-top: -4px;
	pointer-events: none;
	border:2px solid #ffffff;
	border-radius: 8px;
	transform-origin: center;
}

.start-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 70px;
	height: 40px;
	margin-left: -35px;
	margin-top: 150px;
	background: #fff;
	color:#000;
	line-height: 40px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;

	display: none;
}

.about-text a.bandcamp-link {
	background: #000;
	color: #fff;
	padding: 10px;
}

.about-text a.bandcamp-link:after {
	background: #fff;
}

.tooltip2 div{
	margin-top: 20px;
}

.tooltip2 div svg{
	fill: #ffffff;
	border: 1px solid #fff;
}

.tooltip2 div svg:first-of-type{
	transform: rotate(180deg);
}

body.sea-level .intro-help{
	color: #000000;
}

body.sea-level .intro-help h5{
	text-shadow: 0px 0px 5px #ffffff;
}

body.sea-level .tooltip1 div{
	border-color:#000000;
}

body.sea-level .tooltip2 div svg{
	fill: #000000;
	border: 1px solid #000;
}


/*
$quad-ease-in : cubic-bezier(0.550, 0.085, 0.680, 0.530);
$cubic-ease-in : cubic-bezier(0.550, 0.055, 0.675, 0.190);
$quart-ease-in : cubic-bezier(0.895, 0.030, 0.685, 0.220);
$quint-ease-in : cubic-bezier(0.755, 0.050, 0.855, 0.060);
$sine-ease-in : cubic-bezier(0.470, 0.000, 0.745, 0.715);
$expo-ease-in : cubic-bezier(0.950, 0.050, 0.795, 0.035);
$circ-ease-in : cubic-bezier(0.600, 0.040, 0.980, 0.335);

$quad-ease-out : cubic-bezier(0.250, 0.460, 0.450, 0.940);
$cubic-ease-out : cubic-bezier(0.215, 0.610, 0.355, 1.000);
$quart-ease-out : cubic-bezier(0.165, 0.840, 0.440, 1.000);
$quint-ease-out : cubic-bezier(0.230, 1.000, 0.320, 1.000);
$sine-ease-out : cubic-bezier(0.390, 0.575, 0.565, 1.000);
$expo-ease-out : cubic-bezier(0.190, 1.000, 0.220, 1.000);
$circ-ease-out : cubic-bezier(0.075, 0.820, 0.165, 1.000);

$quad-ease-in-out : cubic-bezier(0.455, 0.030, 0.515, 0.955);
$cubic-ease-in-out : cubic-bezier(0.645, 0.045, 0.355, 1.000);
$quart-ease-in-out : cubic-bezier(0.770, 0.000, 0.175, 1.000);
$quint-ease-in-out : cubic-bezier(0.860, 0.000, 0.070, 1.000);
$sine-ease-in-out : cubic-bezier(0.445, 0.050, 0.550, 0.950);
$expo-ease-in-out : cubic-bezier(1.000, 0.000, 0.000, 1.000);
$circ-ease-in-out : cubic-bezier(0.785, 0.135, 0.150, 0.860);
*/