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;
		vertical-align: baseline; }


/*===================================================================================================
 Basic styles
===================================================================================================*/
	body {
    background: #000;
    background-repeat: no-repeat;
    background-size: 100% 100%;

}
html {
    height: 100%;
}

body {
        margin:0;
        padding:0;
        color:white;
        font-family: "bau", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
       
        text-decoration: none;
	    text-transform: none;
	    text-rendering: auto;

	}
nav {z-index:4;position:fixed;}
a, button {
	-webkit-transition: color 0.2s ease-out;
	-moz-transition: color 0.2s ease-out;
	-o-transition: color 0.2s ease-out;
	transition: color 0.2s ease-out;
    text-decoration: none;
}

a, a:visited {
	color: #fff;
}

a:hover, a:active, a:focus, #heroNav a:hover, #heroNav a:visited:hover, #heroNav a:active, #heroNav a:focus, #formSubmit:hover, .contentModule a:hover, .contentModule a:visited:hover, .contentModule a:active, .contentModule a:focus { color: #777777; } {
	color: #888;
}

h1, h3, h4, h5, h6 {

	font-weight: 300;
	letter-spacing: -0.03em;
	text-transform: none;	
}


h1{font-size:4em;}
h2{font-size:2em;}
p {line-height: 1.5em;font-size:0.9em;letter-spacing:0.02em;}


	/* Customization */
	.projectThumbnail {
		cursor: pointer;	
	}

	.project img.thumbnailImage {
		max-width: 100%;
		height: auto;
		cursor: pointer;
	}
	.project-mobile img.thumbnailImage {
		max-width: 100%;
		height: auto;
		cursor: pointer;
	}
	
/*===================================================================================================
mobile styles
===================================================================================================*/

#textDiv{
  top: 100px;
  left: 50%;
  width: 200px;
  height: 100px;
  margin: 0 0 0 -100px;
  text-align: center;
  position: absolute;
}

#backgroundImg{
  position: absolute;
  position: fixed;
  height: 100%;
}

#containerImg{
  width: 100%;
  height: 100%;
  background-image: url('https://quinzequinze.com/content/protos/tupapau/images/mobile/fond.png') ; 
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
  position: fixed;
  z-index: -1;
}

#containerNav{
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
}

#containerTxt{
  width: 100%;
  height: 100%;
  position: absolute;
  font-size: 20px;
}

#musicLink{
  top:3%;
  left: 50%;
  margin: 0 0 0 -125px;
  position: absolute;
}

#experienceLink{
  bottom: 3%;
  left: 50%;
  margin: 0 0 0 -125px;
  position: absolute;
}




#showReal{
  width: 100%;
  height: 100%;
}

#showReal iframe{
  width: 100%;
  height: 100%;
}

#showReal video{
  width: 100%;
  height: 100%;
}

#playlist{
  width: 100%;
  height: 100%;
}

#playlist iframe{
  width: 100%;
  height: 100%;
}



/*===================================================================================================

/*===================================================================================================
music styles
===================================================================================================*/

#sitePreloader {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	z-index: 2;
}

#preloaderImage {

	margin: 300px auto;
}

.project {
	margin-bottom: 40px;
	position: relative;
	overflow: hidden;
}
.project-mobile {
	margin-bottom: 40px;
	position: relative;
	overflow: hidden;
}

.projectThumbnail {
	max-width: 100%;
	height: 100%;
}

.projectThumbnail img {
	display: block;
}

.projectThumbnailHover {
	background-image: url("https://quinzequinze.com/content/protos/tupapau/images/masks/rond.png");
	position: absolute;
	width: 100%;
	float:center;
	height: 100%;
	display: none;
	z-index: 2;
}

.projectThumbnailHover h4 {
	font-family: "Varela Round", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	letter-spacing: -0.05em;
	position: absolute;
	display: none;
	font-weight: normal;
    font-style: normal;
	font-size: 24px;
	line-height: 1;
	text-align: center;
	letter-spacing: 0;
	margin-top: 40px;
	left:450px;
	
}

.projectThumbnailHover h5, .projectThumbnailHover h6 {

	position: absolute;
	display: none;
	font-weight: 600;
    font-style: normal;
	font-size: 11px;
	text-align:center;
	line-height: 1.2;
	letter-spacing: 0.3em;
	padding-top: 102px;

}

.thumbnailMask {
	/*background-image: url("https://quinzequinze.com/content/protos/tupapau/images/masks/rounded.png");*/
	/*
	Disable pointer events to allow swipe navigation - needed to use a svg instead of a div since no versions of IE support pointer events on divs
	*/
	pointer-events: none;
	width: 460px;
	height: 284px;
	position: absolute;
	z-index: 24;
}


#comptearebourd {
			margin-top:-40px;
			position:fixed;
			left:48%;
			z-index:30;
			font-size:14px;
			letter-spacing:0.3em;
}
				
			


#download {
	
		width:300px;
		height:30px;
		color:#FFF;
		font-size:12px;
		line-height:1.3em;
		letter-spacing:0.1em;
		z-index:100;
		left:20px;
		text-style:uppercase;
		position:fixed;
		z-index:30;
		bottom: 0;
}

/*===================================================================================================
experience styles
===================================================================================================*/

.video {
    position: fixed;
	top:0%;
    width:100%;
    height:100%;
    background:#1c1c1c;
    border-bottom: 1px solid #fff;

    z-index:3;
-moz-box-shadow: 0px 5px 40px 0px #000000;
-webkit-box-shadow: 0px 5px 40px 0px #000000;
-o-box-shadow: 0px 5px 40px 0px #000000;
box-shadow: 0px 5px 40px 0px #000000;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=180, Strength=20);
}

.videoWrapper {

	top:0%;
    width:100%;
    height:100%;
    background:#000;

}

.videoWrapper iframe {
	top: 0;
	left: 200px;
    width: 100%;
	height: 100%;
    
}
  

.imageWrapper {position:fixed;width:50%;}

.images img{overflow: hidden;width:100%;margin: 10;}
    
.textWrapper {
   position: fixed;
    opacity:0;

}
.textWrapper h2 {
    line-height: 1.8em;
    text-align:center;
    text-transform:uppercase;
    font-size: 1em;
    letter-spacing: 0.3em;
    padding-bottom:30px;
    padding-right:10px;


}

.textWrapper p { }
     
.column2 {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 30px; /* Chrome, Safari, Opera */
    -moz-column-gap: 30px; /* Firefox */
    column-gap: 30px;
    width:30%;
   font-size:0.8em;
}

.column1 {
position:fixed;
top:15%;
left:76%;
width:17%;
word-break: normal;
font-size:0.8em;
color: #acacac;
}
.column1-eng {
position:fixed;
width:17%;
left:54%;
top:15%;
font-size:0.8em;


}

.spritespin {
    margin:0 auto;
 width:500px;
}

.projectThumbnailXP { width:500px;height:100%;position:absolute;}


.niquelesysteme {

    opacity:0.5;
width:500px;
height:100%;
position:absolute;
  z-index:3;

}

.projet-wrapper {

width:500px;
left:calc(50% - 250px);
margin-top:80px;
position:relative;
}

.projectThumbnailXPHover h4 {
	font-family: "Varela Round", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
    text-shadow: 1px 1px 10px rgba(0, 0, 0, 1);
    font-style: normal;
	font-size: 24px;
	line-height: 1;
	text-align: center;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	text-rendering: auto;
    position: absolute;
    top: -105px;
 
	
}

.projectThumbnailXPHover h5 {
	font-weight: 600;
    text-shadow: 1px 1px 10px rgba(0, 0, 0, 1);
    font-style: normal;
	font-size: 11px;
	text-align:left;
	line-height: 1.2;
	letter-spacing: 0.3em;
	text-decoration: none;
	text-transform: none;
	text-rendering: auto;
    position: absolute;
    left: 100px;
    top: -30px;
    width:200px;
    
}

.projectThumbnailXPHover {
    position: absolute;
    background:green;
    left: 240px;
    width:200px;
    z-index:2;
    display:none;
}



#load {
  position: absolute;
  top: 1%;
  left: 50%;
  background:url(../../../../assets/images/load2.gif) center center  ;
  z-index:80;
  font-size: 5em;
  line-height: 1;
  width: 20px;
  height: 20px;
  margin-left:-15px;

  
}
#load2 {
  position: absolute;
  bottom: 1%;
  left: 50%;
  background:url(../../../../assets/images/load2.gif) center center  ;
  z-index:80;
  font-size: 5em;
  line-height: 1;
  width: 30px;
  height: 30px;
  margin-left:-15px;

  
}#load3 {
  position: absolute; 
  top: 50%;
  left: 1%;
  background:url(../../../../assets/images/load3.gif) center center  ;
  z-index:80;
  font-size: 5em;
  line-height: 1;
  width: 30px;
  height: 30px;
   margin-top:-15px;
 
  
}#load4 {
  position: absolute;
  top: 50%;
  right: 1%;
  background:url(../../../../assets/images/load3.gif) center center  ;
  z-index:80;
  font-size: 5em;
  line-height: 1;
  width: 30px;
  height: 30px;
  margin-top:-15px;

  
}

#load5 {

  background:url(../../../../assets/images/loading.gif)  ;


  
}

#glace {  
    position:fixed;
    z-index:1;
    width:100%;
    height:100%;
    opacity:0.9;
}

#droite{ 

    right:0%;
}
#gauche{ 

    left:0%;
}

#droite img{ 
    z-index:2;
    height:100%;
    width: 175px;
    margin-left:13px;
    margin-top:-3px;
}


#gauche img {
    z-index:2;
    height:100%;
    width: 175px;
    margin-left:13px;
    margin-top:-3px;
}

.blanc {display:none;}


#rond-droite{

    right:100px;
    position:fixed;
    z-index:4;
    height: 200px;
    width: 200px;
    top: calc(50% - 100px);
    overflow:hidden;
    -webkit-border-radius:250px;
    -moz-border-radius:250px;
    border-radius:250px;
    border: 2px solid #fff;
    -webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
    background:none;

}

#home{
    
    left:calc(50% - 4px);
    position:fixed;
    z-index:4;
    height:8px;
    width: 8px;
    top: 35px;
    overflow:hidden;
    -webkit-border-radius:250px;
    -moz-border-radius:250px;
    border-radius:250px;
    -webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
    background:white;
    

}

#home:hover { 
    height: 14px;
    width: 14px;
    left:calc(50% - 7px);
    top:31px;
} 
#mp3{

    left:75px;
    position:fixed;
    z-index:4;

    top: calc(50% - 55px);
    overflow:hidden;

    border: 0px solid #FFF;
    -webkit-transition: all 0.05s ease-out;
	-moz-transition: all 0.05s ease-out;
	-o-transition: all 0.05s ease-out;
	transition: all 0.05s ease-out;
    background:none;
    font-size:10px;
    letter-spacing: 0.03em;
    padding-left:16px;
    line-height: 2em;
text-align:center;
}

#mp3:hover { 

letter-spacing: 0.3em;
color:white;
 margin-top:-40px;
 line-height: 3em;

} 


#rond-gauche {
    left:100px;
    position:fixed;
    z-index:4;
    height: 200px;
    width: 200px;
    top: calc(50% - 100px);
    overflow:hidden;
    -webkit-border-radius:250px;
    -moz-border-radius:250px;
    border-radius:250px;
    border: 2px solid #fff;
    -webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
    background:none;

}

#rond-gauche:hover { 
    background: rgba(0,0,0,1);
  border: 2px solid #000;
}

#rond-droite:hover { 
    background: rgba(0,0,0,1);
border: 2px solid #000;
}


#interaction-hover {display:none;}

#droitetext {
    position:fixed;
    z-index:2;
    width:100%;
    height:100%;
    right:0%;
    display:none;
    background:rgba(255,255,255,0.2);
 
}

#gauchetext {
    position:fixed;
    z-index:2;
    width:100%;
    height:100%;
    left:0%;
    display:none;
    background:rgba(255,255,255,0.2);
}

#lien-interactif {
    position:fixed;
    width: 150px;
    top:30px;
    left:30px;

}

#lien-musique {
    position:fixed;
    width: 150px;
    top:30px;
    right:30px;
}

#contact-us {
    position:fixed;
    width: 125px;
    bottom:30px;

    left:35px;
    cursor:pointer;


}
#contact-us:hover {
    position:fixed;
    width: 125px;
    bottom:30px;
  

}

#about-us {
    position:fixed;
    width: 100px;
    bottom:30px;
    right:45px;
}

.boutons { 
	-webkit-transition: fill 0.4s ease-out;
	-moz-transition: fill 0.4s ease-out;
	-o-transition: fill 0.4s ease-out;
	transition: fill 0.4s ease-out;
    fill:#4a4a4a;
    position: fixed;
    z-index:7;
} 

.boutons:hover { 
    fill:#ccc;
} 
.boutons-social { 
	-webkit-transition: fill 0.4s ease-out;
	-moz-transition: fill 0.4s ease-out;
	-o-transition: fill 0.4s ease-out;
	transition: fill 0.4s ease-out;
    fill:#ccc;
    position:relative;
    z-index:2;
} 

.boutons-social:hover { 
    fill:#4a4a4a;
} 

#contact {position:fixed;z-index:5; width:100%;height:100%;top:0; background: rgba(0,0,0,0.7);display:none;}

#about {position:fixed;z-index:5; width:100%;top:0;left:0%;height:100%;display:none;overflow:auto;background:#FFF}

#about-content {width: 100%;
    height:100%;
    padding-top: 100px;
    padding-bottom: 400px;
    position: fixed;
    overflow:auto;
    height:2000px;
background:#000;
}

/*** Slider Button ***/
.slider-button .button-text {
  color: white;
  font-family: 'arial black', sans-serif;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 2px;
  -webkit-transition: all 0.65s;
  -moz-transition: all 0.65s;
  transition: all 0.65s;

    
}

.slider-button, .text-slider .btn {
  padding: 8px 20px;
  border: 2px solid rgba(255,255,255, 0.8);
  position: relative;
  display: inline-block;
  z-index: 5;
  width:300px;
  height:105px;
  left:calc(50% - 150px);
  top:calc(50% - 75px);
  text-align: center;
    outline: none;
}
.text-slider .btn {font-size: 15px; line-height: 1.8em;}
.slider-button:after, .text-slider .btn:after {
    width: 0%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff;
    content: '';
    line-height: 4em;
    position: absolute;
    z-index: -1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.slider-button:hover, .slider-button:active,
.text-slider .btn:hover, .text-slider .btn:active {
    border-color:#fff;
    color: rgba(0,0,0,0.7);
}

.slider-button:hover .button-text,
.slider-button:active .button-text{
    color: rgba(0,0,0,0.7);
}

.slider-button:hover:after, .slider-button:active:after,
.text-slider .btn:hover:after, .text-slider .btn:active:after {
    width: 100%;
}


.about-rond {
    width:35%;
    left: calc( 50% - 17.5%);
    position:absolute;
    z-index:4;
    vertical-align: middle;
    overflow:hidden;
    opacity: 1;
    color:#000;

}



.rond {
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
border: 4px solid #fff;

width:35%;
}


#about-1 {
    width:1400px;
    height:445px;
    top:calc(50% - 222.5px);
    left: calc( 50% - 700px);
    position:fixed;
    z-index:4;
    opacity: 1;

}

#savoir {
    width:240px;
    bottom:30px;
    left: calc( 50% - 120px);
    position:fixed;
    z-index:4;
    opacity: 1;

}
#plus-info {
    width:190px;
    height:70px;
    bottom:0px;
    left: calc( 50% - 95px);
    position:absolute;
    z-index:4;
    opacity: 1;
    cursor:pointer;

}


#savoir-fleche2 {    
    width: 30px;
    bottom:10px;
    right: 30%;
    position:fixed;
    z-index:4;
    opacity: 1;}

#social {
top:calc(50% - 52px);
left:75px;
width:30px;
height:90px;
position: fixed;
z-index:3;
display:inline;
}

#listen-left {
top:calc(50% - 52px);
left:75px;
width:30px;
height:90px;
position: fixed;
z-index:4;
display:inline;
}

#social-right {
top:calc(50% - 52px);
right:75px;
width:30px;
height:90px;
position: fixed;
z-index:4;
display:inline;
}


#facebook, #twitter, #stumble, #spotify, #deezer, #itunes {
height:100%;
margin-top:-10px;


}

			#previous{

			position:fixed;
			width:200px;
			height:10px;
			left:-50px;
            top:calc(50% - 5px);
			opacity:0.4;
            z-index:4;
		  letter-spacing:0.4em;
    font-size:10.5px;
    text-align:center;
                	font-weight: bold;
   -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
    
    font-family: "Varela Round", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial,sans-serif;
	-webkit-transition: opacity 0.2s ease-out;
	-moz-transition: opacity 0.2s ease-out;
	-o-transition: opacity 0.2s ease-out;
	transition: opacity 0.2s ease-out;
		
			}
			
			#previous:hover {
				cursor: pointer;
				opacity:0.7;
				}

			#next{
			
			position:fixed;
			width:150px;
			height:10px;
			right:-30px;
            top:calc(50% - 5px);
                content:'yo';
			opacity:0.4;
            z-index:4;
		  letter-spacing:0.4em;
    font-size:10.5px;
    text-align:center;
                	font-weight: bold;
   -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
 
    font-family: "Varela Round", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial,sans-serif;
	-webkit-transition: opacity 0.2s ease-out;
	-moz-transition: opacity 0.2s ease-out;
	-o-transition: opacity 0.2s ease-out;
	transition: opacity 0.2s ease-out;
			}
			
			#next:hover {
				cursor: pointer;
				opacity:1;
				}

#shareTexte{
    bottom:70px;
    left:calc(50% - 66px);
    position: fixed;
    color:#fff;
    width:124px;
    margin-left:3px;
    letter-spacing:0.3em;
    font-size:9px;
    text-align:center;
    display:none;
    cursor:help;
    font-family: "Varela Round", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial,sans-serif;
}

.morceau-groupe {
    position:fixed;
    left:calc(50% - 200px);
    z-index:4;
    width:400px;
    text-align: center;
    margin-top:10px;
    text-transform: uppercase;
    color:white;
	font-weight: bold;
    font-style: normal;
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: 0.3em;
  
}

.morceau-groupe img {
 width:100%;

}
.morceau-groupe p {
    position:fixed;
    left:calc(50% - 200px);
    z-index:4;
    width:400px;
    text-align: center;
    margin-top:10px;
    text-transform: uppercase;
    color:white;
	font-weight: bold;
    font-style: normal;
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: 0.3em;
  
}

#player {position:relative;z-index:1}
#player2 {position:fixed;z-index:1}

#XP-texte {
    position:fixed;
    width:80%;
    z-index:6;
    height:80%;
    left:10%;
    cursor: url('https://quinzequinze.com/images/bas2.png') 30 30, pointer;
}

.XP-texte, .XP-texte2 {
    width:100%;
 text-shadow: 1px 1px 10px rgba(0, 0, 0, 1);
    color: #acacac;
    font-size:2vw;
    position:fixed;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    z-index:4;
    -webkit-transition: all 200ms linear
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear;

}

.XP-texte {cursor: url('https://quinzequinze.com/images/bas2.png') 30 30, pointer;}



.XP-textegauche, .XP-textegauche2 {

    position:fixed;
    width:30%;
    margin-left:20px;
    top:calc(50% - 110px);
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6em;
    letter-spacing: 0.05em;
    z-index:6;
    letter-spacing:3px;

  
}

.XP-textedroite, .XP-textedroite2 {
    position:fixed;
    width:30%;
    right:20px;
    top:calc(50% - 110px);
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6em;
    letter-spacing: 0.05em;
    z-index:6;

  
}

.XP-textedroite2, .XP-textegauche2 {opacity:0;}


#hidevimeo { cursor: url('https://quinzequinze.com/images/bas2.png') 30 30, pointer;}
#about { cursor: url('https://quinzequinze.com/images/bas2.png') 30 30, pointer;}
#aboutclose { cursor: pointer;position:fixed;top:27px;right:calc( 50% - 13px);width:26px;}

#fixed-overlay{
    width:100%;
    height:100%;
    position:absolute;
    z-index:99999999;
    background:url('../../../../assets/images/01.png') repeat;
    opacity:1;
}

.english {
color: white;

}

#texte-experience{
width:35%;
margin-left: 10%;
}