/*  RESET CSS

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

/* FONTS */


@font-face 
{
  font-family: 'nr';
  src: url('../data/fonts/nr/nr.eot?#iefix') format('embedded-opentype'),  
  	   url('../data/fonts/nr/nr.woff') format('woff'), 
  	   url('../data/fonts/nr/nr.ttf')  format('truetype'), 
  	   url('../data/fonts/nr/nr.svg#nr') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face 
{
  font-family: 'fb';
  src: 	url('../data/fonts/fb/fb.eot?#iefix') format('embedded-opentype'),  
  		url('../data/fonts/fb/fb.otf')  format('opentype'),
	    url('../data/fonts/fb/fb.woff') format('woff'), 
	    url('../data/fonts/fb/fb.ttf')  format('truetype'), 
	    url('../data/fonts/fb/fb.svg#fb') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face 
{
  font-family: 'f';
  src: 	url('../data/fonts/f/f.eot?#iefix') format('embedded-opentype'),  
  		url('../data/fonts/f/f.otf')  format('opentype'),
	    url('../data/fonts/f/f.woff') format('woff'), 
	    url('../data/fonts/f/f.ttf')  format('truetype'), 
	    url('../data/fonts/f/f.svg#f') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'gcni';
  src: 
  		url('../data/fonts/gcni/gcni.eot?#iefix') format('embedded-opentype'),  
  		url('../data/fonts/gcni/gcni.otf')  format('opentype'),
	    url('../data/fonts/gcni/gcni.woff') format('woff'), 
	    url('../data/fonts/gcni/gcni.ttf')  format('truetype'), 
	    url('../data/fonts/gcni/gcni.svg#gcni') format('svg');
  font-weight: normal;
  font-style: normal;
}


@font-face 
{
	font-family: 'gci';
	src: 
		url('../data/fonts/gci/gci.eot?#iefix') format('embedded-opentype'),  
		url('../data/fonts/gci/gci.otf')  format('opentype'),
	    url('../data/fonts/gci/gci.woff') format('woff'), 
	    url('../data/fonts/gci/gci.ttf')  format('truetype'), 
	    url('../data/fonts/gci/gci.svg#gci') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* STYLE */

html
{
	width: 100%;
	height: 100%;
}

body
{
	width: 100%;
	height: 100%;
	margin: auto;
    box-sizing: border-box;
    overflow: hidden;
}

.no-scroll-body
{
	overflow : hidden !important;
	overflow-y : hidden !important;
}

#sub-images .carou img,
#menu-item,
#close,
#up,
#return,
.item img,
#full-foreground,
#menu,
#intro
{
	cursor: pointer;
}

.clearfix
{
	clear: both;
}

::-webkit-scrollbar {
    width: 0em;
    height: 0em
}

/* MENU */
#bg-menu
{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index : 100;
	background-color: white;
	opacity: 0.95;
	display: none;
}

#menu
{
	position: fixed;
	width: 83.34%;
	height: 100%;
	top: 0px;
	left: 8.33%;
	z-index : 120;
	overflow: hidden;
	display: none;
}

#menu .menu-bloc
{
	text-align: left;
}	

#menu-punco
{
	position: absolute;
	top: 12.5%;
	left: 37.5%;
}

#menu-about
{
	position: absolute;
	top: 37.5%;
	right: 8.33vw;
}

#menu-film
{
	position: absolute;
	top: 25%;
	left: 4.16vw;
}

#menu-misc
{
	position: absolute;
    left: 37.5%;
    bottom: 25%;
}

#menu-shop
{
	position: absolute;
	right: 8.33vw;
    bottom: 25%;
}

#menu .menu-bloc a.main-link
{
	font-family: "fb";
	font-size: 62px;
	letter-spacing: 2px;
    margin-left: -4px;
}

#menu .menu-bloc a.sub-link
{
/*    font-family: "fb";
    font-size: 12px;
    line-height: 22px;
	letter-spacing: 1px;*/
	font-family: "gci";
    font-size: 18px;
    letter-spacing: 0.5px;
    line-height: 22px;
}

#menu .menu-bloc a
{
	text-decoration: none;
	color: black;
}

#close
{
	position: fixed;
	display: none;
	top: 3vw;
    right: 5.5vw !important;
    transform: translateX(50%) translateY(-30%);
	font-family: "nr";
	font-size: 18px;
	z-index: 120;
	color: black;
}

#up
{
	position: fixed;
	bottom: 3vw;
    right: 5.5vw !important;
	z-index: 90;
	color: black;
	width: 16px;
    transform: translateX(50%);

}

#return
{
	position: fixed;
	display: none;
	top: 3vw;
    right: 5.5vw !important;
    transform: translateX(50%) translateY(-30%);
	z-index: 120;
	color: black;
	width: 22px;
}

/* MARGINS */

#credits
{
	position: fixed;
	top: 3vw;
	left: 5.55vw;
	transform: translateX(-50%);
	font-family: "gcni";
	font-size: 12px;
	letter-spacing: 0.5px;
	z-index : 120;

}

#credits a
{
	color: black;
	text-decoration: none;
}	

#line
{
	position: absolute;
	top: 0;
	left: 0;
    z-index: -1;
}

/* LEFT SIDE */
#left-side
{
	width: 33.3%;
	height: 100%;
	margin-left: 11.1%;
	margin-right: 11.1%;
	float: left;
    overflow-y: scroll;
	overflow-x: hidden;
}

#left-side::-webkit-scrollbar 
{
  display: none;
}

#left-side .content-div
{
	position: relative;
	width: 100%;
	margin-top: 2vw;
	margin-bottom: 2vw;
}

#left-side .content-div .content,
#right-side .content-div .content
{
	width: 100%;
}

#about-title
{
	font-family: "gcni";
    font-size: 44px;
    line-height: 44px;
    letter-spacing: 2px;
    margin-bottom: 2vw;
    display: block;   
    padding-left: 2px;
}

.content.about .head
{
	font-family: "gcni";
    font-size: 30px;
    line-height: 40px;
    letter-spacing: 1px;
    padding-left: 2px;
    display: block;
}

#left-side .content-div .content #main-image
{
	width: 100%;
	overflow: hidden;
}

#left-side .content-div .content #main-image .carou
{
	width: 200%;
}
#left-side .content-div .content #main-image img
{
	width: 50%;
	float: left;
}

#left-side .content-div .content #sub-images
{
	width: 101%;
	height: auto;
	margin-top: 2vw;
	overflow: hidden;
}

#left-side .content-div .content #sub-images .sub-image
{
	width: 9.76vw;
	float: left;
	overflow: hidden;
}

#left-side .content-div .content #sub-images .sub-image.pad
{
	margin-right: 2vw;
}

#left-side .content-div .content #sub-images .sub-image .carou
{
	width: 19.53vw;
}

#left-side .content-div .content #sub-images .sub-image .carou img
{
	width: 50%;
	float:left;
}


/* CENTER */

#center
{
	width: 11.1%;
	height: 100%;
	position: fixed;
	left:50%;
	top: 0%;
	transform: translateX(-50%);
	font-family: "gci";
	font-size: 18px;
    letter-spacing: 1px;
	overflow: hidden;
    box-sizing: border-box;
}

#center .content-div
{
	width: 100%;
}

#right-side .content-div
{
	position: relative;
	width: 100%;
	margin-top: 2vw;
	margin-bottom: 2vw;
}

#bc-player iframe
{
	position: absolute;
	left: 50%;
    top: 2vw;
   	transform-origin: top left;
	transform: scale(0.75) translateX(20px) rotateZ(90deg);
}

#menu-item
{
	position: fixed;
    font-family: "gci";
    font-size: 18px;
	letter-spacing: 0.5px;
    top: 3vw;
	line-height: 0.25;

	right: 5.5vw !important;
	transform: translateX(50%) !important;

	z-index: 80;
}

#pun-collins
{
	position: absolute;
	width: 82px;
	top: 50%;
	left: 50%;
	transform-origin: bottom left;
	transform: rotateZ(90deg) translateY(50%) translateX(-100%);
}

#pagination
{
	position: absolute;
	bottom: 3vw;
	left: 50%;
	transform-origin: bottom left;
	transform: translateX(-50%);
	text-align: center;
}

#pagination.right-pagination
{
    font-family: "gci";
    font-size: 18px;
	letter-spacing: 0.5px;
    right: 5.5vw;
    bottom: 3vw;
	transform: translateX(50%);
    left: unset;
	top: unset;
}

/* RIGHT SIDE */

#right-side
{
	width: 33.3%;
	height: 100%;
	float: left;
    box-sizing: border-box;
    overflow-y: scroll;
	overflow-x: hidden;

}

#right-side .content-div .content
{
	margin-bottom: 2vw;
}
.content.about,
.content.about a
{
	font-family: "nr";
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 1px;
	text-decoration: none;
	color: black;
}
.content.about #press,
.content.about #shows
{
	font-family: "fb";
	font-size: 10px;
	letter-spacing: 1px;
}

#right-side p
{
	font-family: "nr";
	font-size: 11px;
	line-height: 16px;
    letter-spacing: 1px;
	text-align: justify;
	hyphens: auto
}

#right-side h2,
#right-side a
{
	font-family: "gci";
	font-size: 18px;
    letter-spacing: 1px;
}	

#album-def
{
	margin-top: 3vw;
}
.album-title
{
	float: left;
}

.shop-link
{
	float: right;
	color: black;
}

.album-text-left,
.album-text-right
{
	width: 47.5%;
	float: left;
}

.album-text-left
{
	margin-right: 5%;
}

#date, #label, #label a
{
	font-family: "fb";
	font-size: 10px;
	line-height: 14px;
    letter-spacing: 1px;
	color: black;
}

.label-home, .label-home a
{
	font-family: "f" !important;
	font-size: 12px !important;
}

#border-top
{
	position: fixed;
	width: 100%;
	height: 1vw;
	top: 0px;
	left: 0px;
	background: white;
}

#border-bottom
{
	position: fixed;
	width: 100%;
	height: 1vw;
	bottom: 0px;
	left: 0px;
	background: white;
}

/* MISC */

#one-side
{
	width: 77.8%;
	height: 100%;
	margin-left: 11.1%;
    overflow: scroll;
}

#one-side .content-div
{
	position: relative;
	width: 100%;
	height: 100%;
	margin-top: 1vw;
}

#one-side .content-div .content
{
	position: absolute;
	width: 100%;
	height: 100%;
}
#one-side .content-div .content.shop
{
	margin-top: 1vw;
}

#one-side .content-div .content.films
{
	width: 100%;
    margin-top: 1vw;
}

#one-side .column
{
	width: 23.26vw; /* (83.33 - 2 - 2*2 )/3 */
	float: left;
}

#one-side .column.pad
{
	margin-right: 4vw;
}

.item.first
{
	margin-top: 0px;
}

.item
{
	position: relative;
	overflow: hidden;
	margin-top: 4vw;
}
.item.shop
{
	margin-top: 0vw;
	margin-bottom: 2vw;
}

.item img
{
	width: 100%;
}

.item .feed
{
	position: absolute;
	top: 50%;
    left: 25%;
    width: 50%;
    height: 50%;
	font-family: "fb";
    font-size: 10px;
    line-height: 14px;
	letter-spacing: 1px;
}

.feed .date, #feed .date
{
	font-family: "gcni";
    font-size: 12px;
	letter-spacing: 1px;
}

#feed
{
	font-family: "fb";
    font-size: 10px;
    line-height: 14px;
	display: none;
}

#full-foreground
{
	position: fixed;
	width: 98%;
	top: 2vw;
    left: 50%;
    transform: translateX(-50%);
	z-index: 50;
	display: none;
}

#canvas-mask
{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 25;
	display: none;
	background-color: white;
}

.carou.film
{
	position: absolute;
	top: 0;
	left: 0;
	width: 300%;
	height: 100%;
	z-index: 7;
}

.carou-adjust, 
.carou-adjust-next, 
.carou-adjust-prev
{
	position:relative;
	float: left;
	width: 33.33%;
	height: 100%;
	padding:-10% 0 0 0;
	transform: translateX(-100%);
}

.carou-adjust .img-carou, 
.carou-adjust-next .img-carou-next,
.carou-adjust-prev .img-carou-prev
{
	width: 100%; 
	height: 100%;
	background-repeat: no-repeat;
  	background-position: center center;
  	background-size: cover;
}

#film-video
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 5;
}

#film-mask
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.8);
	z-index: 10;
}

#film-info
{
    position: absolute;
    top: 3vw;
    left: 33.54px;
    font-family: "nr";
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 1px;
    left: 50%;
    transform: translateX(-50%);
    padding-left: 5px;
    width: fit-content;
	/*text-align: justify;*/
    /*hyphens: auto;*/
}

#film-name
{
    position: absolute;
	font-family: "gci";
    font-size: 18px;
   	letter-spacing: 1px;
	bottom: 3vw;
}

#film-nav
{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
	bottom: 3vw;
	font-family: "gci";
    font-size: 18px;
   	letter-spacing: 1px;
}

#film-nav a 
{
	cursor: pointer;
	float: right;
}

#film-nav a .next,
#film-nav a .prev
{
    font-family: "fb";
    font-size: 10px;
    line-height: 14px;
    text-decoration: underline;
    color: black;
}

#film-nav a#prev-link
{
    margin-right: 6vw;
}

#film-nav a svg
{
	transform: translateY(-25%);
	fill:none;
	stroke:#000;
	stroke-miterlimit:10;
	stroke-width:1px;
}
#film-name
{
	padding-left: 5px;
}
#php-film-index,
#php-album-index,
#php-intro
{
	display: none;
}

a#clip-link
{
	display: block;
    cursor: pointer;
	margin-top: 2vw;
    text-decoration: none;
    color: black;
}

a#clip-link .clip
{
    font-family: "fb";
    font-size: 10px;
    line-height: 14px;
    text-decoration: underline;
    color: black;
    cursor: pointer;
}

a#clip-link .double-dot
{
    font-family: "fb";
    font-size: 10px;
    line-height: 14px;
    text-decoration: none !important;
}

a#clip-link #link-name,
{
	font-family: "gci";
    font-size: 18px;
    letter-spacing: 1px;
    text-decoration: none !important;
}

#misc-description
{
	position: absolute;
	/*bottom: 4vw;*/
	font-family: "gci";
    font-size: 14px;
    letter-spacing: 1px;
}

#conditions-shop {

    font-family: "nr";
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 1px;

	width: 46.4% !important;

    margin-top: 2vw;
    margin-bottom: 1vw;
    margin-left: 53.6%;


/*    background-color: white;
    z-index: 2;
    width: 33.3%;
    margin-left: 55.55%;*/
    /*margin-left: 11.1%;*/
}

.img-shop
{
    background-repeat: no-repeat;
    background-size: contain;
	/*width: 42.8% !important;*/
	width: 46.4% !important;
	float: left;
	margin-right: 7.2%;
	/*margin-right: 14.26%;*/
	7.2
}

.shop-title
{
	font-family: "gci";
    font-size: 18px;
    letter-spacing: 1px;
}
.shop-desc
{
    font-family: "nr";
    font-size: 11px;;
    line-height: 16px;
    letter-spacing: 1px;
}
.shop-obj
{
    font-family: "fb";
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 1px;
}

.buy-img
{
    width: 55px;
    transform: translateX(-10px);
}

.shop-text input
{
	/*border: 1px solid rgba(0,0,0,0.5);*/
}

/* INTRO */

#intro
{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.95);
}
#intro-center
{
	position: absolute;
    top: 50%;
    width: 50vh;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

#intro-center img
{
	/*margin-top: 3vw;*/
	width: 100%;
}

#intro-center iframe
{    
    width: 100%;
    height: 42px;
}

#intro-infos
{
	margin-top: 2vw;
}

#intro-center h2,
#intro-center #clip-link,
#intro-center .shop-link
{
	font-family: "gci";
    font-size: 18px;
    letter-spacing: 1px;
    color: white;
}

#intro-center #date, 
#intro-center #label,
#intro-center #label a,
#intro-center #clip-link .clip
{

    color: white;
}

#intro-center #date
{
	margin-top: 2vw;
}

#play-arrow
{
	width: 4vw;
	height: 4vw;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

@keyframes anim-play {
    from {fill: red;}
    to {fill: yellow;}
}

#play-arrow polygon
{
	fill: transparent;
	stroke:black;
	stroke-miterlimit:10;
	stroke-width: 2;
	transition-property: fill;
    transition-duration: 0.4s;
}

#play-arrow polygon:hover
{
    fill: black;
   	stroke:transparent;
}