body, ul, li, section, article {margin: 0px; padding: 0px}

body { margin: 0px;  font-family: sans-serif; overflow: hidden; /* color: #f33f51 */}

p {font-size: 13px;}

a {text-decoration: none}

.mybody {position: absolute; height: 1500px; width: 100%; top: 0px; z-index: -1;
	background-image: url(img/necrostase-b.jpg) ; background-size: 130%; background-position: center 200px; background-repeat: no-repeat; /* transition:background-size 0.2s linear; */
}

header {height: 100vh;}
/* header svg {width: 40%; margin: 10vw 0px 0px 10vw} */



.logosrv {position: fixed; /* height: 100px; */ width: 40%; box-sizing: border-box; padding: 2vw 2vw 6vw 2vw; top: 0px; z-index: 1;  transition:margin-top 1s ease }
.logosrv svg {width: 100%; margin: 10vw 0px 0px 10vw}



.necrom { position: fixed; height: 80vh; width: 40%; box-sizing: border-box; padding: 2vw 2vw 2vw 2vw; top: 80vh; z-index: 1; margin: 0px 0px 0px 10vw; background-color:white; transition:background-color 0.5s ease, top 0.5s ease}

.necrom svg {width: 90%; margin: 1vh 5% 2vh 5%}
.necrom article { border-bottom: 0px solid black; margin: 0px 5%; height: 0px; overflow: hidden; transition:height 0.25s ease }

.necrom p {margin: 0px; padding: 1.5em 0px; line-height: 1.5em}
.necrom p a {background-color: #f33f51   ; color: white; padding: 0px 3px }

.necrom p a.newalbum { font-size: 13px; padding: 5px 10px; font-weight: 900 }



nav.mainav  { position: fixed; top:-600px; right: 2vw; /* width: 40px;  */border: 0px solid red; padding: 0px; z-index: 2; transition: top 1s ease;}
nav.mainav  ul { list-style-type: none; padding: 0px; margin: 0px;}
nav.mainav  ul li {display: inline-block; width: 40px; margin-bottom: 2vw; margin-left: 2vw; background-color: #4a4927; background-image: url(img/rouge.png); background-position: 0px 80px; background-repeat: repeat-x; transition: background-position 0.5s ease; overflow: hidden ; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); box-sizing: border-box; }
nav.mainav  ul li a { display: block; height: 40px; width: 40px;  color: white; padding: 40px 0px 0px 0px;  font-size: 11px; text-transform: uppercase; }
nav.mainav  ul li a:hover {}




section {margin: 0px; padding: 0px; box-sizing: border-box;  height: 100vh; overflow: hidden  }





.odioplayer {
	background-color: #2a2b17; color: #ff0179;	
/* 	border-top: 2vw solid #27280d; */  /* border-bottom: 2vw solid white; */
}
/*
.odioplayerbg {
	position: absolute; 
	width: 100vw; height: 100vh; opacity: 0.5;
	background-image: url(img/necrostase-b.jpg) ; background-size: 3000px; background-position: center center; background-repeat:no-repeat; 
}
*/

.odioplayerbgseq {
	position: absolute; border-bottom:0px dotted white; opacity:0; border: 2vh solid #2a2b17; box-sizing: border-box; box-shadow: 0px 0px 16px #000;
	width: 80vh; height: 80vh; border-radius: 50%; top: 150vh; left: 50%; margin: -40vh 0px 0px -40vh; 
	background-image: url(img/gfx/0-0.jpg) ; background-size: cover; background-position: center center; background-repeat: no-repeat; 
	transition:opacity 4s ease;
}


.stockimage {
	position: absolute;  margin: 0px 0px 0px 10vw; background-color: #eee;
	width: 200px; height: 0px; left:0px; /* display: none;  */ overflow: hidden;
}
.stockimage ul {display: inline-block; margin-right: 1px; padding: 0px ; width: 12px;  font-size: 0px; vertical-align: top; }
.stockimage ul li { border: 0px solid white; width: 12px; height: 12px; margin: 0px; padding: 0px;  background-color: red }



.svg9tracks {position: absolute; width: 24vh; top:50%; left:50%; margin: 88vh 0px 0px -12vh}
.svg12tracksbig {position: absolute; width: 40vh; top:50%; left:50%; margin: 80vh 0px 0px -20vh}
.svg90sec { position: absolute; width: 42vh; top:50%; left:50%; margin: 79vh 0px 0px -21vh ; /* box-shadow: inset  0px 0px 64px black; border-radius: 50%; */}

/*
.trks9 {fill:#41440f; stroke:#1a1b07; stroke-width:1; transition : fill 0.5s ease}
.trks12 {fill:#2a2b17; stroke:#51541f; stroke-width:1; transition : fill 0.5s ease}
*/
.trks9 {fill:none; stroke:none; stroke-width:1; transition : all 0.5s ease}
.trks12 {fill:none; stroke:none; stroke-width:1; transition : all 0.5s ease}

.st90{fill:#71743f; stroke:#2a2b17; stroke-width:1}


.b_playpause {
	position: absolute;  top:150vh; left:50%; margin: -32px 0px 0px -32px; border: 3px solid #f33f51; box-sizing: border-box;
	display: block; width: 64px; height: 64px; border-radius: 50%; background-color: #f33f51; /* border: 0px solid #f33f51; */ 
	transition: background-color 0.5s ease, border 0.5s ease;
}


div.listracks {  margin: 0px; border-top: 8px solid #f33f51; padding-top: 1vh; overflow: hidden; }

div.listracks ul  {  width: 13000px; margin-left: 0px; transition : margin-left 0.3s ease;}
div.listracks ul li { display: inline-block; width: 200px; margin-right: 800px; height: 40px; background-image: url(img/12titres.png); background-repeat: no-repeat; font-size: 14px; }
div.listracks ul li strong {color : red; display: inline-block; width: 100px;}

.listracks ul li:nth-child(1) {background-position: 200px 10px}
.listracks ul li:nth-child(2) {background-position: 0px 10px}
.listracks ul li:nth-child(3) {background-position: -200px 10px}
.listracks ul li:nth-child(4) {background-position: -400px 10px}
.listracks ul li:nth-child(5) {background-position: -600px 10px}
.listracks ul li:nth-child(6) {background-position: -800px 10px}
.listracks ul li:nth-child(7) {background-position: -1000px 10px}
.listracks ul li:nth-child(8) {background-position: -1200px 10px}
.listracks ul li:nth-child(9) {background-position: -1400px 10px}
.listracks ul li:nth-child(10) {background-position: -1600px 10px}
.listracks ul li:nth-child(11) {background-position: -1800px 10px}
.listracks ul li:nth-child(12) {background-position: -2000px 10px}
.listracks ul li:nth-child(13) {background-position: -2200px 10px}




.teaser { background-color: rgba(13, 14, 10, 1); color: #ff0179}
.iframebox {margin: 0px auto; width: 20vh; height: 20vh; overflow: hidden }
iframe {width: 40vh; height: 40vh; margin: -10vh 0px 0px -10vh}



.shopping{ padding: 80px 0px 0px 0px; background-color:  #f5f5f5; color: #f33f51}








.scene {
/* 	position: absolute;  */
	width: 512px; height: 512px; margin: 80px auto;
/* 	top: 50%; left: 50%; margin: -256px 0 0 -256px; */
/* 	background-color: #EEE; */
	-webkit-perspective: 900px;
	perspective: 900px;
	
}
#cube {
	position: absolute;
	top: 0; left: 0; height: 512px; width: 512px;
	box-shadow: 0px 0px 40px #ddd; 
	-webkit-transform-style: preserve-3d;
	-webkit-transform : translate3d(0px,0px,0px) rotateX(-6deg) rotateY(0deg);
	-moz-transform-style: preserve-3d;
	-moz-transform : translate3d(0px,0px,0px) rotateX(-6deg) rotateY(0deg);
	transform-style: preserve-3d;
	transform : translate3d(0px,0px,0px) rotateX(-6deg) rotateY(0deg);

	-webkit-transition-property: rotateX, rotateY, rotateZ ;
	-webkit-transition-duration: 2.0s;
	-webkit-transition-timing-function: ease;
	-moz-transition-property: rotateX, rotateY, rotateZ;
	-moz-transition-duration: 2.0s;
	-moz-transition-timing-function: ease;	
	transition-property: rotateX, rotateY, rotateZ;
	transition-duration: 2.0s;
	transition-timing-function: ease;
		
	-webkit-transition : rotateX 2s ease, rotateY 2s ease, rotateZ 2s ease;
	-moz-transition : rotateX 2s ease, rotateY 2s ease, rotateZ 2s ease;
	transition : rotateX 2s ease, rotateY 2s ease, rotateZ 2s ease;
	

}
#cube:active {
	-webkit-transform : translate3d(0px,0px,0px) rotateX(6deg) rotateY(188deg);
	-moz-transform : translate3d(0px,0px,0px) rotateX(6deg) rotateY(188deg);
	transform : translate3d(0px,0px,0px) rotateX(6deg) rotateY(188deg);
	
}


.face {
	position: absolute; height: inherit; width: inherit; opacity: 1;  border:0px solid #fff;
	box-shadow: inset 0px 0px 12px white; font-size: 0px; text-align: center; color:black;
	background-size: 100% 100%;
	cursor: pointer;

}

.face.front { background-color: white;
	-webkit-transform: translateZ(10px);
	transform: translateZ(10px);
	background-image: url(img/sl1.jpg);
	cursor: pointer;
}
.face.right { background-color: white; width: 20px;
	-webkit-transform: translateX(502px) rotateY(90deg);
	transform: translateX(502px) rotateY(90deg);
	background-image: url(img/sl4.jpg)
}
.face.left { background-color: white; width: 20px;
	-webkit-transform: translateX(-10px) rotateY(-90deg);
	transform: translateX(-10px) rotateY(-90deg);
	background-image: url(img/sl3.jpg)
}
.face.back { background-color: white;
	-webkit-transform: translateZ(-10px) rotateY(180deg);
	transform: translateZ(-10px) rotateY(180deg);
	background-image: url(img/sl2.jpg)
}
.face.top { background-color: red; height: 20px;
	-webkit-transform: translateY(-10px) rotateX(90deg);
	transform: translateY(-10px) rotateX(90deg);
}
.face.bot { background-color: white; height: 20px;
	-webkit-transform: translateY(502px) rotateX(-90deg);
	transform: translateY(502px) rotateX(-90deg);
}






.cachintro {
	position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 999;
	border : 0px solid red;
}

.cachintro span {
	position: absolute; top: 0px; left: 0px; width: 128px; height: 128px; border-radius: 0px; 
	border : 0px solid #ddd; background-color: rgba(255, 255, 255, 0.66);
}