html {
  font-family: serif;
	font-size: 16px;
}

/*
 *http://stackoverflow.com/questions/1719452/how-to-make-a-div-always-full-screen/1720820#1720820
 */

html, body {
	height: 100%;
	margin: 0;
	padding:0;
}

@media only screen and (max-device-width: 1024px) {
  .hide-on-med-and-down {
    display: none !important;
	}
}

/* overwrite materialize.css and set new min-width */
@media only screen and (min-width: 993px) {
  .hide-on-large-only {
    display: block !important;
	}
}
@media only screen and (min-width: 1025px) {
  .hide-on-large-only {
    display: none !important;
	}
}

i.small {
	font-size: 3rem;
}

.container {
	min-height: 100%;
	height: 100%;
	padding: 0;
	position: relative;
}

.homepage .container {
	min-height: 100%;
  background: url(/img/gillian-face-6.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.bio-nice main {
		background-color:  #8c8989; 
}

/* Desktop */
@media only screen 
and (min-width: 1024px) {
	.container {
		min-width: 1024px;
		min-height: 768px;
	}
}

.button-collapse {
	float: left;
	position: fixed;
	z-index: 2;
	width: 72px;
	text-align: center;
}

#subnav 	{
	font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
	position: absolute;
	left: 15%;
	font-size:large;
	height:32px;
	z-index: 1;
	width: 10%;
}

#subnav1, #subnav2 	{
	width: 50%;
	text-align: center;
	float: left;
}

.navbar {
	width: 100%;
	height: 72px;
	background-color: transparent;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1;
	border-top: 0;
}

.intro-mem .navbar {
	background: none;
	background-color: #9CBCEC;
}

.intro-pic .navbar {
	background: none;
	background-color: #8c8989;
}

.bio-nice .navbar {
	background: none;
	background-color: #8c8989;
}

.bio-upndwn .navbar {
	background-color: #A09377;
}

.bio-liaisons .navbar {
	background-color: #E4CDA4;
}

.bio-parismatch .navbar {
	background-color: #D09593;
}

.bio-passport .navbar {
	background-color: #aec5d1;
}

.bio-onaledge .navbar {
	background-color: #d6bebf;
}

.bio-agetendre .navbar {
	background-color: #A19948;
}

.bio-owl .navbar {
	background-color: #000;
}

.bio-blueguitar .navbar {
	background-color: #000;
}

.music .navbar {
	background-color: #000;
}

.music-cest .navbar {
	background-color: #000;
}

.music-anxiete .navbar {
	background-color: #6B735C;
}

.music-cigarette .navbar {
	background-color: #A7A47B;
}

.music-change .navbar {
	background-color: #9E93A4;
}

.music-sacre .navbar {
	background-color: #886778;
}

.music-avec .navbar {
	background-color: #F5F1E7;
}

.music-quiasu .navbar {
	background-color: #000;
}

.music-rentre .navbar {
	background-color: transparent;
}

.music-msol .navbar {
	background-color: #7D7572;
}

.film-beat .navbar {
	background-color: #A5ADB4;
}

.film-parisiennes .navbar {
	background-color: #000;
}

.film-cat .navbar {
	background-color: #df9b08
}

.film-globe .navbar {
	background-color: #543928;
}

.film-blowup .navbar {
	background-color: #afc3d0;
}

.film-evidence .navbar {
	background-color: #727470;
}

.film-maigret .navbar {
	background-color: #727470;
}

.film-faute .navbar {
	background-color: #727470;
}

.film-clockwork .navbar {
	background-color: #CC262A;
}

.music-zzb .navbar {
	background-color: #8D857D;
}

main {
	height: 100%;
	left: 15%;
	position: absolute;
	width: 85%;
	text-align: center;
}

.homepage main {
  position: absolute;
	text-align: center;
	width: 85%;
	left: 15%;
	background: transparent;
  padding-bottom: 50px;
}


@media only screen and (max-device-width: 992px) {
	.homepage main {
		width: 100%;
		left: 0;
	}
}


.homepage main h1 {
	font-family: Futura, "Century Gothic", AppleGothic, sans-serif;	
	font-weight: normal;
	text-align: center;
	font-size: 65pt;
	font-size: 4.5vw;
	color: #f482ad;
	letter-spacing: 55px;
	letter-spacing: 2.7vw;
	width: 100%;
}

@media only screen and (max-device-width: 992px) {
	.homepage main h1 {
		font-size: 30px;
		font-weight: 600;
	}
}

.intro-pic main {
	background-color: #8c8989;
}


.bio-owl main {
	background-color: #000;
}

.bio-blueguitar main {
	background-color: #000;
}

.art main {
	background-color: #cec1bc;
}

.music main {
	background-color: #000;
}

.music-rentre main {
	background: url(/img/rentre.jpg) no-repeat;
	background-size: cover;
}

@media only screen and (max-device-width: 992px) {
	.intro-pic {
		background: none;
		background-color: #8c8989;
	}
	.art {
		background: none;
		background-color: #cec1bc;
	}
	.intro-pic main {
			background-color: transparent;
	}
	main {
		top: 72px;
		left: 0;
		width: 100%;
	}
	.music-rentre main {
		top: 0;
		left: 0;
		width: 100%;
	}
}

.clickhint {
	font-size: 18px;
	padding-top: 3px;
	margin-bottom: 10px;
}

#front {
	max-height: 100%;
}

/* entire container, keeps perspective */
.flip-container{
	/*perspective*/
	-webkit-perspective: 1000px;
		 -moz-perspective: 1000px;
			-ms-perspective: 1000px;
			 -o-perspective: 1000px;
					perspective: 1000px;
	cursor: pointer;
}

/* flip the pane */
.flip-container.flip .flipper {
	/*transform*/
	-webkit-transform: rotateY(-180deg);
		 -moz-transform: rotateY(-180deg);
			-ms-transform: rotateY(-180deg);
			 -o-transform: rotateY(-180deg);
					transform: rotateY(-180deg);
}


/* iPhone portrait */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 736px) 
and (orientation : portrait) {
	#block {
		margin: 0px auto 0;
	}
	.flip-container, .front, .back, figure img {
		width: 550px;
		width: 90vw;
		height: auto;
	}
	.art figure img {
		width: 80vw;
	}
}

/* iPhone landscape */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 736px) 
and (orientation : landscape) {
	#block {
		margin: 20px auto 0;
	}
	.flip-container, .front, .back, figure img {
		width: 200px;
		height: auto;
	}
	.art figure img {
		width: 200px;
	}
	.art #block {
		margin: 30px auto 0;
	}
}

/* iPad portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	#block {
		margin: 0 auto 0;
	}
	.flip-container, .front, .back, figure img {
		width: 75vw;
		height: auto;
	}
	.art figure img {
		width: 550px;
	}
}

/* iPad landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	#block {
		margin: 0 auto 0;
	}
	.flip-container, .front, .back, figure img {
		width: 420px;
		height: auto;
	}
	.art figure img {
		width: 400px;
	}
}

/* Desktop */
@media only screen 
and (min-device-width : 1025px) {
	#block {
		margin: 40px auto 0;
	}
	.art #block {
		margin: 10vh auto 0;
	}
	.flip-container, .front, .back, figure img {
		max-width: 50vw;
		width: 65vh;
	}
	.art figure img {
		width: 55vh;
		min-width: 406px;
		min-height: 600px;
	}
}

/* flip speed goes here */
.flipper {
	/*transition*/
	-webkit-transition: 2s;
		 -moz-transition: 2s;
			 -o-transition: 2s;
					transition: 2s;
	/*transform-style*/
	-webkit-transform-style: preserve-3d;
		 -moz-transform-style: preserve-3d;
			-ms-transform-style: preserve-3d;
			 -o-transform-style: preserve-3d;
					transform-style: preserve-3d;
	position:relative;
}

/* hide back of pane during swap */
.front, .back{
	/*backface-visibility*/
	-webkit-backface-visibility: hidden;
		 -moz-backface-visibility: hidden;
			-ms-backface-visibility: hidden;
			 -o-backface-visibility: hidden;
					backface-visibility: hidden;
	position:absolute;
	top:0;
	left:0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back{
	/*transform*/
	-webkit-transform: rotateY(180deg);
		 -moz-transform: rotateY(180deg);
			-ms-transform: rotateY(180deg);
			 -o-transform: rotateY(180deg);
					transform: rotateY(180deg);
}

figure {
	margin: 0;
}

figcaption {
	font-size: 18px;	
}

.scroll {
	overflow: auto;
}

.bio-upndwn #background {
	width:100%;
	background-image:url(/img/updown.jpg);
	background-size: cover;
}

.bio-parismatch main {
	background-image: url(/img/pm2.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

.bio-parismatch ul.side-nav {
	width: 15%;
}

.bio-parismatch ul.side-nav.fixed {
	background-image: url(/img/bg.jpg);
	background-size: cover;
	top:0;
	height: 100%;
	padding-top: 150px;
}

.bio-liaisons main {
	background-color: #E3CDA1;
	background-size: cover;
}

.bio-passport main {
	background-color: #aec5d1;
}
.bio-onaledge main {
	background-color: #d6bebf;
}
.bio-agetendre main {
	background-color: #A19948;
}
.music-avec main {
	background-color: #F5F6F3;
}

/* iPhone portrait */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 736px) 
and (orientation : portrait) {
	body.music-rentre {
		background-color: #657785;
	}

	#background {
		height: 1000px;
		background-size: cover;
		background-repeat: no-repeat;
	}
	#background img {
		margin-top: 200px;
		position: absolute;
		left: 0;
		width: 100%;
		height: auto;
	}
	.bio-upndwn #background {
		width:100%;
		background-image:url(/img/updown.jpg);
		background-size: contain;
	}

	.bio-parismatch main img {
		width: 100%;
		height: auto;
	}
	.bio-parismatch .localtext {
		color: #092828;
		font-size: 22px;
		text-align: justify;
		padding: 0 30px;
	}
	.bio-parismatch p.localtext {
		margin-top: 0;
	}
}

/* iPhone landscape */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 736px) 
and (orientation : landscape) {
	#background {
		height: 1000px;
		background-size: cover;
		background-repeat: no-repeat;
	}
	#background img {
		margin-top: 675px;
		position: absolute;
		left: 10px;
		width: 300px;
		height: 300px;
	}
	.bio-parismatch main img {
		width: 100%;
		height: auto;
	}
	.bio-parismatch .localtext {
		color: #092828;
		font-size: 22px;
		text-align: justify;
		padding: 0 50px;
	}
	.bio-parismatch p.localtext {
		margin-top: 0;
	}
}


/* iPad portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	#background {
		height: 1600px;
		background-size: cover;
		background-repeat: no-repeat;
	}
	#background img {
		margin-top: 575px;
		position: absolute;
		left: 50px;
		width: 700px;
		height: 700px;
	}
	.bio-upndwn #background {
		width:100%;
		background-image:url(/img/updown.jpg);
		background-size: contain;
	}

	.bio-parismatch main img {
		width: 100%;
		height: auto;
	}
	.bio-parismatch .localtext {
		color: #092828;
		font-size: 22px;
		text-align: justify;
		padding: 0 50px;
	}
	.bio-parismatch p.localtext {
		margin-top: 0;
	}
}

/* iPad landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	#background {
		height: 1600px;
		background-size: auto;
	}
	#background img {
		width: 900px;
		height: 900px;
		margin-top: 675px;
		position: absolute;
		left: 150px;
	}
	.bio-parismatch main img {
		width: 100%;
		height: auto;
	}
	.bio-parismatch .localtext {
		color: #092828;
		font-size: 22px;
		text-align: justify;
		padding: 0 50px;
	}
	.bio-parismatch p.localtext {
		margin-top: 0;
	}
}

/* Desktop */
@media only screen 
and (min-device-width : 1025px) {
	#background {
		height: 200%;
	}
	#background img {
		width: 900px;
		height: 900px;
		margin-top: 575px;
		position: absolute;
		left: 50px;
	}
	.bio-parismatch main img {
		width: 100%;
		max-width: 100%;
		height: auto;
		min-width: 864px;
		min-height: 730px;
	}
	.bio-parismatch .localtext {
		width: calc(100% - 100px);
		color: #092828;
		font-size: 18px;
		text-align: justify;
		padding-left: 70px;
	}
	.bio-parismatch p.localtext {
		margin-top: 0;
	}
}

/* Non Desktop */
@media only screen 
and (max-device-width : 1025px) {
	body.bio-nice {
		background-color:  #8c8989; 
	}
}
	
/* iPhone portrait */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 736px) 
and (orientation : portrait) {
	.container {
		width: 100%;
	}
	
	#subnav 	{
		left: 25%;
  	margin-top: 23px;
		position: fixed;
		width: 45%;
	}

	#gh {
		position: absolute;
		bottom: 150px;
		width: 100%;
	}

	.homepage main h1 {
		font-size: 30px;
		font-weight: 600;
	}

	.intro-mem main.memo-bg-eng {
		background-image: url("/img/memo-bg-eng-2.jpg");
		background-size: cover;
		background-position: center;
		background-position-y: -60px; 
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
	}
	.intro-mem main.memo-bg-fra {
		background-image: url("/img/memo-bg-fra-2.jpg");
		background-size: contain;
		background-position: center;
		background-position-y: -70px; 
		background-repeat: no-repeat;
		background-color: #9CBCEC;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
	}

	body.bio-nice {
		background-color: #8c8989;
	}

	.bio-liaisons main div:first-child {
		float: left;
		width: 100%
	}
	.bio-liaisons main div:nth-child(2) {
		float: left;
		width: 18%;
	}
	.bio-liaisons main div:nth-child(3) {
		float: left;
		width: 82%
	}
	.bio-liaisons main div:nth-child(4) {
		float: left;
		width: 82%;
	}
	.bio-liaisons main img {
		width: 100%;
	}
	.bio-liaisons main .localtext {
		color: #564a38;
		font-family: 'Times New Roman', Times, serif;
		padding: 0 20px;
		text-align: left;
	}
	.bio-liaisons main .localtext h3 {
		margin-top: 0;
	}
	.bio-liaisons main .localtext h5 {
		font-size: 1.2rem;
	}
	.bio-liaisons main .localtext p {
		text-align: justify;
		-moz-hyphens: auto;
	  -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
	}
	body.bio-passport {
		background-color: #aec5d1;
	}
	.bio-passport main img {
		width: 87%;
	}
	.bio-passport main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		line-height: 28px;
		color: #0b5050;
		text-align: left;
		width: 87%;
		margin: 16px 6.5%;
	}
	.bio-onaledge main img {
		width: 87%;
	}
	.bio-onaledge main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		line-height: 28px;
		color: #FFF;
		text-align: left;
		width: 87%;
		margin: 16px 6.5%;
	}
	.bio-agetendre main img {
		width: 87%;
	}
	.bio-owl main img {
		width: 87%;
	}
	.bio-owl main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		line-height: 28px;
		color: #c6e4e4;
		text-align: left;
		width: 87%;
		margin: 16px 6.5%;
	}
	.bio-blueguitar main img {
		width: 87%;
	}
	.bio-blueguitar main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		line-height: 28px;
		color: #1be8fa;
		text-align: justify;
		width: 87%;
		margin: 16px 6.5%;
	}	
	.music main img {
		width: 100%;
		height: auto;
	}
	.music-cest main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #FFF;
		position:absolute;
		top: 50px;
		left: 50%;
		text-align: left;
		width: 45%;
		height: 90%;
	}

	.music-anxiete main video {
		width: 93%;
		height: auto;
		margin-top: 24px;
	}
	.music-anxiete main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		width: 93%;
		left: 3.5%;
		top: 60%;
		height: 35%;
		text-align: left;
		position: absolute;
	}

	.music-cigarette main video {
		width: 93%;
		height: auto;
	}
	.music-cigarette main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		width: 93%;
		left: 3.5%;
		top: 50%;
		height: 35%;
		text-align: left;
		position: absolute;
	}
	.music-change main img {
		width: 93%;
		height: auto;
		margin-top: 24px;
	}
	.music-change main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		width: 93%;
		left: 3.5%;
		top: 65%;
		height: 35%;
		text-align: left;
		position: absolute;
	}
	.music-sacre main img {
		width: 30%;
		height: auto;
		margin-left: 3.5%;
		margin-top: 72px;
		float: left;
	}
	.music-sacre main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		width: 55%;
		left: 40%;
		top: 55px;
		height: 83%;
		text-align: left;
		position: absolute;
	}

	.music-avec main figure:first-child img {
		width: 100%;
		max-width: 100%;
		height: auto;
		margin-top: 40px;
	}
	.music-avec main figure:nth-child(2) img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}

	.music-quiasu main {
		background-color: #000;
	}
	.music-quiasu main img {
		margin-top: 5%;
	}
	.music-quiasu main .quiasu {
		width: 100%;
		max-width: 100%;
    position: relative;
		margin: 0 auto;
	}

	.music-rentre main #rentre1 {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 16px;
		line-height: 26px;
		float: right;
		margin-right: 5%;
		margin-top: 56px;
	}
	.music-rentre main #rentre2 {
		float: left;
		width: 100%; 
	}
	.music-rentre main #rentre2 .pageA {
		width: 50%;
		height: auto;
		left: 0;
		float: left;
	}
	.music-rentre main #rentre2 .pageB {
		width: 50%;
		height: auto;
		left: 50%;
		float: right;
	}
	.music-rentre main #rentre2 img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
	.music-rentre main #rentre3 {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 16px;
		line-height: 26px;
		float: left;
		margin-left: 5%;
		text-align: left;
	}

	.music-msol main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		width: 80%;
		left: 10%;
		top: 25px;
		height: 83%;
		text-align: left;
		position: absolute;
	}

	.film-beat main video {
		width: 93%;
		height: auto;
		margin-top: 24px;
	}
	.film-beat main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #bc0c16;
		width: 93%;
		left: 3.5%;
		top: 50%;
		height: 35%;
		text-align: left;
		position: absolute;
	}

	.film-parisiennes main video {
		width: 93%;
		height: auto;
		margin-top: 24px;
	}
	.film-parisiennes main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #f5e67a;
		width: 93%;
		left: 3.5%;
		top: 50%;
		height: 35%;
		text-align: left;
		position: absolute;
	}

	body.film-cat {
		background-color: #df9b08;
	}
	.film-cat main figure {
		float: left;
		width: 100%;
		height: 100%;
		background-image: url("/img/film-cat.jpg");
		background-size: cover;
		background-repeat: no-repeat;
	}
	.film-cat main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #FFF;
		text-align: left;
		width: 100%;
		height: 90%;
		float: left;
		margin-top: 24px;
		padding: 0 3.5%;
		overflow: visible; 
	}

	body.film-globe {
		background-color: #543928;
	}
	.film-globe main img {
		width: 100%;
	}
	.film-globe main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		line-height: 28px;
		color: #f9cc16;
		text-align: justify;
		width: 87%;
		margin: 16px 6.5%;
	}	

	.film-blowup main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #fa082a;
		text-align: left;
		width: 90%;
		padding-left: 10%;
	}

	.film-blowup main .blowup {
		background-image:url(/img/blowup.jpg);
		background-repeat:no-repeat;
		background-size: contain;
		height: 100%;"
	}
	.film-blowup main .vspacer {
		float: left;
		width: 100%;
		height: 50%;
	}
	.film-blowup main .spacer {
		float: left;
		width: 0;
		height: 0;
	}
	.film-blowup main video {
		float: left;
		width: 100%;
	}
	.film-blowup main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #fa082a;
		text-align: left;
		width: 93%;
		padding: 0 3.5%;
	}

	.film-evidence main {
		background-color: #FFF;
	}
	.film-evidence main img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
	.film-evidence main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		text-align: left;
		width: 93%;
		padding: 0 3.5%;
	}
	.film-evidence main video {
		float: left;
		margin-top: 5%;
		margin-right: 5%;
		margin-bottom: 5%;
		width: 100%
	}

	.film-maigret main {
		background-color: #FFF
	}
	.film-maigret main figure {
		float: left;
		width: 97%;
		height: 100%;
		background-image: url("/img/maigret-2.jpg");
		background-size: cover;
	}
	.film-maigret main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		text-align: left;
		width: 93%;
		height: 90%;
		float: left;
		padding: 0 3.5%;
	}

	.film-faute main {
		background-color: #FFF
	}
	.film-faute main video {
		float: left;
		width: 100%;
		height: auto;
		margin-top: 24px;
	}
	.film-faute main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		text-align: left;
		width: 93%;
		height: 90%;
		float: left;
		padding: 0 3.5%;
	}

	.film-clockwork main {
		background-color: #000
	}
	.film-clockwork main img.cwo-polaroid {
		width: 100%;
		height: auto;
		float: left;
		margin-top: 0;
	}
	.film-clockwork main img.cwo-title {
		height: auto;
		width: 93%;
		float: left;
		margin-top: 12px;
		padding: 0 3.5%;
	}
	.film-clockwork main span {
		color:#FFF;
		font-size: 16px;
		font-weight: 600;
		width: 93%;
		float: left;
		margin-top: 12px;
		padding: 0 3.5%;
	}
	.film-clockwork main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #FFF;
		text-align: left;
		width: 93%;
		float: left;
		margin-top: 12px;
		padding: 0 3.5%;
	}

	.music-zzb main {
		background-image:url(/img/zbb.jpg);
		background-repeat:no-repeat;
		background-size: cover;
	}
	.music-zzb main .flexbox-container {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
	
		-ms-flex-align: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
	
		align-items: center;
		
		height: 100%;
		width: 100%;
	}
	.music-zzb main video {
		width: 60%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}

	main div.hide-on-large-only {
		float:left;
		width: 100%;
	}
	.music-sacre main div.hide-on-large-only {
		float:left;
		width: 20%;
	}
}

/* iPhone landscape */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 736px) 
and (orientation : landscape) {
	.container {
		width: 100%;
	}
	
	.button-collapse {
		width: 72px;
		margin-left: 20px;
	}
	
	#subnav 	{
		left: 20%;
  	margin-top: 23px;
		position: fixed;
		width: 35%;
	}

	#gh {
		position: absolute;
		bottom: 150px;
		width: 100%;
	}

	.homepage main h1 {
		font-size: 30px;
		font-weight: 600;
	}

	.intro-mem main.memo-bg-eng {
		background-image: url("/img/memo-bg-eng.jpg");
		background-size: cover;
		background-position: right bottom;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
	}
	.intro-mem main.memo-bg-fra {
		background-image: url("/img/memo-bg-fra.jpg");
		background-size: cover;
		background-position: right bottom;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
	}

	.bio-liaisons main div:first-child {
		float: left;
		width: 100%
	}
	.bio-liaisons main div:nth-child(2) {
		float: left;
		width: 18%;
	}
	.bio-liaisons main div:nth-child(3) {
		float: left;
		width: 82%
	}
	.bio-liaisons main div:nth-child(4) {
		float: left;
		width: 82%;
	}
	.bio-liaisons main img {
		width: 100%;
	}
	.bio-liaisons main .localtext {
		color: #564a38;
		font-family: 'Times New Roman', Times, serif;
		padding: 0 20px;
		text-align: left;
	}
	.bio-liaisons main .localtext h3 {
		margin-top: 0;
	}
	.bio-liaisons main .localtext p {
		text-align: justify;
		-moz-hyphens: auto;
	  -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
	}

	body.bio-passport {
		background-color: #aec5d1;
	}
	.bio-passport main img {
		width: 71%;
	}
	.bio-passport main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		line-height: 28px;
		color: #0b5050;
		text-align: left;
		width: 71%;
		margin: 16px 14.5%;
	}
	.bio-onaledge main img {
		width: 71%;
	}
	.bio-onaledge main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		line-height: 28px;
		color: #0b5050;
		text-align: left;
		width: 71%;
		margin: 16px 14.5%;
	}
	.bio-agetendre main img {
		width: 71%;
	}
	.bio-owl main img {
		width: 71%;
	}
	.bio-owl main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		line-height: 28px;
		color: #c6e4e4;
		text-align: left;
		width: 71%;
		margin: 16px 14.5%;
	}
	.bio-blueguitar main img {
		width: 71%;
	}
	.bio-blueguitar main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		line-height: 28px;
		color: #1be8fa;
		text-align: justify;
		width: 71%;
		margin: 16px 14.5%;
	}	
	.music main img {
		width: auto;
		height: 100%;
	}
	.music-cest main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #FFF;
		position:absolute;
		top: 50px;
		left: 50%;
		text-align: left;
		width: 45%;
		height: 90%;
	}
	
	.music-anxiete main video {
		width: 35%;
		height: auto;
		margin-top: 20px;
		float: right;
		margin-right: 5%
	}
	.music-anxiete main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		width: 90%;
		left: 5%;
		top: 50%;
		height: 35%;
		text-align: left;
		position: absolute;
	}
	
	.music-cigarette main video {
		width: 35%;
		height: auto;
		margin-top: 20px;
		float: right;
		margin-right: 5%
	}
	.music-cigarette main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		width: 90%;
		left: 5%;
		top: 50%;
		height: 35%;
		text-align: left;
		position: absolute;
	}
	.music-change main img {
		width: 30%;
		height: auto;
		margin-top: 20px;
		float: right;
		margin-right: 5%
	}
	.music-change main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		width: 90%;
		left: 5%;
		top: 50%;
		height: 35%;
		text-align: left;
		position: absolute;
	}
	.music-sacre main img {
		width: 22%;
		height: auto;
		margin-top: 30px;
		float: right;
		margin-right: 5%
	}
	.music-sacre main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		width: 65%;
		left: 3.0%;
		top: 15%;
		height: 57%;
		text-align: left;
		position: absolute;
	}
	.music-avec main figure:first-child img {
		width: 100%;
		max-width: 100%;
		height: auto;
		margin-top: 20px;
	}
	.music-avec main figure:nth-child(2) img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}

	.music-quiasu main {
		background-color: #000;
	}
	.music-quiasu main img {
		margin-top: 5%;
	}
	.music-quiasu main .quiasu {
		width: 100%;
		max-width: 100%;
    position: relative;
		margin: 2% auto;
	}

	body.music-rentre {
		background: url(/img/rentre.jpg) no-repeat;
		background-size: cover;
		background-color: #657785;
	}
	.music-rentre {
		background: none;
	}
	.music-rentre main {
		background: none;
	}
	.music-rentre main #rentre1 {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 16px;
		line-height: 26px;
		float: right;
		margin-right: 5%;
		margin-top: 6px;
	}
	.music-rentre main #rentre2 {
		float: left;
		width: 100%; 
	}
	.music-rentre main #rentre2 .pageA {
		width: 50%;
		height: auto;
		left: 0;
		float: left;
	}
	.music-rentre main #rentre2 .pageB {
		width: 50%;
		height: auto;
		left: 50%;
		float: right;
	}
	.music-rentre main #rentre2 img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
	.music-rentre main #rentre3 {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 16px;
		line-height: 26px;
		float: left;
		margin-left: 5%;
		text-align: left;
	}

	.music-msol main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		width: 65%;
		left: 3.0%;
		top: 15%;
		height: 57%;
		text-align: left;
		position: absolute;
	}

	.film-beat main video {
		width: 35%;
		height: auto;
		margin-top: 20px;
		float: right;
		margin-right: 5%
	}
	.film-beat main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #bc0c16;
		width: 90%;
		left: 5%;
		top: 50%;
		height: 35%;
		text-align: left;
		position: absolute;
	}

	.film-parisiennes main video {
		width: 30%;
		height: auto;
		margin-top: 20px;
		float: right;
		margin-right: 5%
	}
	.film-parisiennes main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #f5e67a;
		width: 90%;
		left: 5%;
		top: 50%;
		height: 35%;
		text-align: left;
		position: absolute;
	}

	.film-cat main figure {
		float: left;
		width: 60%;
		height: 100%;
		background-image: url("/img/film-cat.jpg");
		background-size: cover;
	}
	.film-cat main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #FFF;
		text-align: left;
		width: 40%;
		height: 90%;
		float: left;
		margin-top: 36px;
		padding: 0 10px;
	}

	body.film-globe {
		background-color: #543928;
	}
	.film-globe main img {
		width: 100%;
		max-width: 100%;
		height: auto;
		position: absolute;
		left: 0;
		top: 0;
	}
	.film-globe main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #f9cc16;
		position:absolute;
		top: 60%;
		left: 3%;
		text-align: left;
		width: 70%;
	}

	.film-blowup main .blowup {
		background-image:url(/img/blowup.jpg);
		background-repeat:no-repeat;
		background-size: contain;
		height: 100%;"
	}
	.film-blowup main .vspacer {
		float: left;
		width: 100%;
		height: 50%;
	}
	.film-blowup main .spacer {
		float: left;
		width: 0;
		height: 0;
	}
	.film-blowup main video {
		float: left;
		width: 100%;
	}
	.film-blowup main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #fa082a;
		text-align: left;
		width: 93%;
		padding: 0 3.5%;
	}

	.film-evidence main {
		background-color: #FFF;
	}
	.film-evidence main img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
	.film-evidence main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		text-align: left;
		width: 60%;
		padding: 0 24px;
	}
	.film-evidence main video {
		float: right;
		margin-top: 5%;
		margin-right: 5%;
		width: 35%
	}

	.film-maigret main {
		background-color: #FFF
	}
	.film-maigret main figure {
		float: left;
		width: 60%;
		height: 100%;
		background-image: url("/img/maigret-2.jpg");
		background-size: cover;
	}
	.film-maigret main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		text-align: left;
		width: 40%;
		height: 90%;
		float: left;
		margin-top: 36px;
		padding: 0 10px;
	}

	.film-faute main {
		background-color: #FFF
	}
	.film-faute main video {
		float: left;
		width: 40%;
		height: auto;
		margin-left: 5%;
		margin-top: 5%;
	}
	.film-faute main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		text-align: left;
		width: 45%;
		height: 90%;
		float: left;
		margin-top: 36px;
		margin-left: 5%;
		padding: 0 10px;
	}

	.film-clockwork main {
		background-color: #000
	}
	.film-clockwork main img.cwo-polaroid {
		width: 45%;
		height: auto;
		position: absolute;
		left: 1%;
		top: 30px;
	}
	.film-clockwork main img.cwo-title {
		width: 45%;
		height: auto;
		position: absolute;
		top: 50px;
		left: 50%;
		width: 45%;
	}
	.film-clockwork main span {
		color:#000;
		position: absolute;
		left: 51%;
		top: 90px;
		font-size: 12px;
		font-weight: 600;
	}
	.film-clockwork main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #FFF;
		position:absolute;
		top: 160px;
		left: 50%;
		text-align: left;
		width: 45%;
	}

	.music-zzb main {
		background-image:url(/img/zbb.jpg);
		background-repeat:no-repeat;
		background-size: cover;
	}
	.music-zzb main .flexbox-container {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
	
		-ms-flex-align: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
	
		align-items: center;
		
		height: 100%;
		width: 100%;
	}
	.music-zzb main video {
		width: 25%;
		height: auto;
		margin-left: auto;
		margin-right: 1%;
		margin-top: 50vh;
	}

	main div.hide-on-large-only {
		float:left;
		width: 100%;
	}
	.music-sacre main div.hide-on-large-only {
		float:left;
		width: 20%;
	}
}


/* iPad portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	.container {
		width: 100%;
	}

	.button-collapse {
		margin-left: 20px;
	}
	
	#subnav 	{
		left: 15%;
  	margin-top: 23px;
		position: fixed;
		width: 20%;
	}

	#gh {
		position: absolute;
		bottom: 150px;
		width: 100%;
	}

	.homepage main h1 {
		font-size: 48px;
		font-weight: 600;
	}

	.intro-mem main.memo-bg-eng {
		background-image: url("/img/memo-bg-eng-2.jpg");
		background-size: cover;
		background-position: right bottom;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
	}
	.intro-mem main.memo-bg-fra {
		background-image: url("/img/memo-bg-fra-2.jpg");
		background-size: cover;
		background-position: right bottom;
		background-position-y:	-50px; 
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
	}

	.bio-liaisons main div:first-child {
		float: left;
		width: 100%
	}
	.bio-liaisons main div:nth-child(2) {
		float: left;
		width: 18%;
	}
	.bio-liaisons main div:nth-child(3) {
		float: left;
		width: 82%
	}
	.bio-liaisons main div:nth-child(4) {
		float: left;
		width: 82%;
	}
	.bio-liaisons main img {
		width: 100%;
	}
	.bio-liaisons main .localtext {
		color: #564a38;
		font-family: 'Times New Roman', Times, serif;
		padding: 0 20px;
		text-align: left;
	}
	.bio-liaisons main .localtext h3 {
		margin-top: 0;
	}

	.bio-liaisons main .localtext p {
		text-align: justify;
		-moz-hyphens: auto;
	  -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
	}
	.bio-passport main img {
		width: 400px;
		left: 30px;
		position: absolute;
	}
	.bio-passport main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		line-height: 28px;
		color: #0b5050;
		position:absolute;
		top: 250px;
		left: 370px;
		text-align: left;
		width: 400px;
	}
	.bio-passport main .localtext2 {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		line-height: 28px;
		color: #aec5d1;
		position:absolute;
		top: 250px;
		left: 370px;
		text-align: left;
		width: 60px;
		white-space: nowrap;
		text-overflow: clip;
		overflow: hidden;
	}
	.bio-onaledge main img {
		width: 634px;
		max-width: 634px;
		left: 20px;
		position: absolute;
	}
	.bio-onaledge main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 22px;
		line-height: 28px;
		color: #FFF;
		position:absolute;
		top: 120px;
		left: 450px;
		text-align: left;
		width: 300px;
	}	
	.bio-agetendre main img {
		width: 94%;
	}
	.bio-owl main img {
		width: 40%;
		left: 5%;
		position: absolute;
	}
	.bio-owl main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 22px;
		line-height: 28px;
		color: #c6e4e4;
		position:absolute;
		left: 50%;
		text-align: left;
		width: 45%;
		margin-top: 0;
	}
	.bio-blueguitar main img {
		width: 94%;
	}
	.bio-blueguitar main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 22px;
		line-height: 28px;
		color: #1be8fa;
		top: 450px;
		left: 10%;
		text-align: justify;
		width: 55%;
		position: absolute;
	}	
	.music main img {
		width: 100%;
		height: auto;
		margin-top: 72px;
	}
	.music-cest main img {
		width: 100%;
		max-width: 100%;
		top: 0;
		left: 0;
		position: absolute;
	}
	.music-cest main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #FFF;
		position:absolute;
		top: 50px;
		left: 60%;
		text-align: left;
		width: 35%;
		height: 90%;
	}
	
	.music-anxiete main video {
		width: 90%;
		height: auto;
		margin-top: 24px;
	}
	.music-anxiete main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		width: 90%;
		left: 5.88%;
		top: 65%;
		height: 35%;
		text-align: left;
		position: absolute;
	}

	.music-cigarette main video {
		width: 90%;
		height: auto;
	}
	.music-cigarette main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		width: 90%;
		left: 5.88%;
		top: 60%;
		height: 35%;
		text-align: left;
		position: absolute;
	}
	.music-change main img {
		width: 90%;
		height: auto;
		margin-top: 24px;
	}
	.music-change main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		width: 90%;
		left: 5.88%;
		top: 65%;
		height: 35%;
		text-align: left;
		position: absolute;
	}
	.music-sacre main img {
		width: 30%;
		height: auto;
		margin-top: 72px;
		margin-left: 5.5%;
		float: left;
	}
	.music-sacre main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		width: 50%;
		left: 40%;
		top: 60px;
		height: 80%;
		text-align: left;
		position: absolute;
	}
	.music-avec main figure:first-child img {
		width: 100%;
		max-width: 100%;
		height: auto;
		margin-top: 10px;
	}
	.music-avec main figure:nth-child(2) img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}

	.music-quiasu main {
		background-color: #000;
	}
	.music-quiasu main img {
		margin-top: 1%;
	}
	.music-quiasu main .quiasu {
		width: 100%;
		max-width: 100%;
    position: relative;
		margin: 1% auto;
	}

	body.music-rentre {
		background: url(/img/rentre.jpg) no-repeat;
		background-size: cover;
		background-color: #657785;
	}
	body.music-rentre {
		background: url(/img/rentre.jpg) no-repeat;
		background-size: cover;
		background-color: #657785;
	}
	.music-rentre {
		background: none;
	}
	.music-rentre main {
		background: none;
	}
	.music-rentre main {
		background: none;
	}
	.music-rentre main #rentre1 {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 16px;
		line-height: 26px;
		float: right;
		margin-right: 5%;
		margin-top: 56px;
	}
	.music-rentre main #rentre2 {
		float: left;
		width: 100%; 
	}
	.music-rentre main #rentre2 .pageA {
		width: 50%;
		height: auto;
		left: 0;
		float: left;
	}
	.music-rentre main #rentre2 .pageB {
		width: 50%;
		height: auto;
		left: 50%;
		float: right;
	}
	.music-rentre main #rentre2 img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
	.music-rentre main #rentre3 {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 16px;
		line-height: 26px;
		float: left;
		margin-left: 5%;
		text-align: left;
	}

	.music-msol main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		width: 50%;
		left: 40%;
		top: 40px;
		height: 80%;
		text-align: left;
		position: absolute;
	}

	.film-beat main video {
		width: 90%;
		height: auto;
		margin-top: 24px;
	}
	.film-beat main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #bc0c16;
		width: 90%;
		left: 5.88%;
		top: 60%;
		height: 35%;
		text-align: left;
		position: absolute;
	}

	.film-parisiennes main video {
		width: 90%;
		height: auto;
		margin-top: 24px;
	}
	.film-parisiennes main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #f5e67a;
		width: 90%;
		left: 5.88%;
		top: 60%;
		height: 35%;
		text-align: left;
		position: absolute;
	}

	.film-cat main figure {
		float: left;
		width: 60%;
		height: 100%;
		background-image: url("/img/film-cat.jpg");
		background-size: cover;
	}
	.film-cat main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #FFF;
		text-align: left;
		width: 40%;
		height: 90%;
		float: left;
		margin-top: 36px;
		padding: 0 10px;
	}

	body.film-globe {
		background-color: #543928;
	}
	.film-globe main img {
		width: 100%;
		max-width: 100%;
		height: auto;
		position: absolute;
		left: 0;
		top: 0;
	}
	.film-globe main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #f9cc16;
		position:absolute;
		top: 50%;
		left: 3%;
		text-align: left;
		width: 70%;
	}

	.film-blowup main .blowup {
		background-image:url(/img/blowup.jpg);
		background-repeat:no-repeat;
		background-size: contain;
		height: 100%;"
	}
	.film-blowup main .vspacer {
		float: left;
		width: 100%;
		height: 70%;
	}
	.film-blowup main .spacer {
		float: left;
		width: 0;
		height: 0;
	}
	.film-blowup main video {
		float: left;
		width: 100%;
	}
	.film-blowup main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #fa082a;
		text-align: left;
		width: 93%;
		padding: 0 3.5%;
	}

	.film-evidence main {
		background-color: #FFF;
	}
	.film-evidence main img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
	.film-evidence main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		text-align: left;
		width: 60%;
		padding: 0 24px;
	}
	.film-evidence main video {
		float: right;
		margin-top: 5%;
		margin-right: 5%;
		width: 35%
	}

	.film-maigret main {
		background-color: #FFF
	}
	.film-maigret main figure {
		float: left;
		width: 100%;
		height: 100%;
		background-image: url("/img/maigret-2.jpg");
		background-size: cover;
	}
	.film-maigret main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		text-align: left;
		width: 93%;
		height: 90%;
		float: left;
		padding: 0 3.5%;
	}

	.film-faute main {
		background-color: #FFF
	}
	.film-faute main video {
		float: left;
		width: 40%;
		height: auto;
		margin-left: 5%;
		margin-top: 20%;
	}
	.film-faute main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		text-align: left;
		width: 45%;
		height: 90%;
		float: left;
		margin-top: 36px;
		margin-left: 5%;
		padding: 0 10px;
	}

	.film-clockwork main {
		background-color: #000
	}
	.film-clockwork main img.cwo-polaroid {
		width: 45%;
		height: auto;
		position: absolute;
		left: 1%;
		top: 30px;
	}
	.film-clockwork main img.cwo-title {
		height: auto;
		position: absolute;
		top: 50px;
		left: 50%;
		width: 48%;
	}
	.film-clockwork main span {
		color:#000;
		position: absolute;
		left: 53%;
		top: 100px;
		font-size: 13px;
		font-weight: 600;
	}
	.film-clockwork main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #FFF;
		position:absolute;
		top: 170px;
		left: 50%;
		text-align: left;
		width: 45%;
	}

	.music-zzb main {
		background-image:url(/img/zbb.jpg);
		background-repeat:no-repeat;
		background-size: contain;
		background-color: #AEF2F3;
	}
	.music-zzb main .flexbox-container {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
	
		-ms-flex-align: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
	
		align-items: center;
		
		height: 100%;
		width: 100%;
	}
	.music-zzb main video {
		width: 25%;
		height: auto;
		margin-left: auto;
		margin-right: 1%;
		margin-bottom: 27vh;
	}

	main div.hide-on-large-only {
		float:left;
		width: 100%;
	}
	.music-sacre main div.hide-on-large-only {
		float:left;
		width: 20%;
	}
}

/* iPad landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	.container {
		width: 100%;
	}
	
	.button-collapse {
		width: 10%;
		margin-left: 20px;
	}
	
	#subnav 	{
		left: 12%;
  	margin-top: 23px;
		position: fixed;
		width: 15%;
	}
	
	#gh {
		position: absolute;
		bottom: 150px;
		width: 100%;
	}

	.homepage main h1 {
		font-size: 48px;
		font-weight: 600;
	}

	.intro-mem main.memo-bg-eng {
		background-image: url("/img/memo-bg-eng.jpg");
		background-size: cover;
		background-position: right bottom;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
	}
	.intro-mem main.memo-bg-fra {
		background-image: url("/img/memo-bg-fra.jpg");
		background-size: cover;
		background-position: right bottom;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
	}

	.bio-liaisons main div:first-child {
		float: left;
		width: 100%
	}
	.bio-liaisons main div:nth-child(2) {
		float: left;
		width: 18%;
	}
	.bio-liaisons main div:nth-child(3) {
		float: left;
		width: 82%
	}
	.bio-liaisons main div:nth-child(4) {
		float: left;
		width: 82%;
	}
	.bio-liaisons main img {
		width: 100%;
	}
	.bio-liaisons main .localtext {
		color: #564a38;
		font-family: 'Times New Roman', Times, serif;
		padding: 0 20px;
		text-align: left;
	}
	.bio-liaisons main .localtext h3 {
		margin-top: 0;
	}
	.bio-liaisons main .localtext p {
		text-align: justify;
		-moz-hyphens: auto;
	  -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
	}
	.bio-passport main img {
		width: 410px;
		left: 100px;
		position: absolute;
	}
	.bio-passport main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		line-height: 28px;
		color: #0b5050;
		position:absolute;
		top: 220px;
		left: 440px;
		text-align: left;
		width: 400px;
	}
	.bio-passport main .localtext2 {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		line-height: 28px;
		color: #aec5d1;
		position:absolute;
		top: 220px;
		left: 440px;
		text-align: left;
		width: 70px;
		white-space: nowrap;
		text-overflow: clip;
		overflow: hidden;
	}
	.bio-onaledge main img {
		width: 450px;
		max-width: 450px;
		left: 100px;
		position: absolute;
	}
	.bio-onaledge main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 22px;
		line-height: 28px;
		color: #FFF;
		position:absolute;
		top: 100px;
		left: 400px;
		text-align: left;
		width: 400px;
	}	
	.bio-agetendre main img {
		width: 80%;
		margin-top: 0px;
	}
	.bio-owl main img {
		width: 40%;
		left: 5%;
		position: absolute;
	}
	.bio-owl main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 22px;
		line-height: 28px;
		color: #c6e4e4;
		position:absolute;
		left: 50%;
		text-align: left;
		width: 45%;
		margin-top: 0;
	}
	.bio-blueguitar main img {
		width: 80%;
	}
	.bio-blueguitar main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 22px;
		line-height: 28px;
		color: #1be8fa;
		top: 550px;
		left: 15%;
		text-align: justify;
		width: 50%;
		position: absolute;
	}	
	.music main img {
		width: auto;
		height: 85%;
	}
	.music-cest main img {
		width: 100%;
		max-width: 100%;
		top: 0;
		left: 0;
		position: absolute;
	}
	.music-cest main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #FFF;
		position:absolute;
		top: 50px;
		left: 60%;
		text-align: left;
		width: 35%;
		height: 90%;
		padding-right: 10px;
	}
	
	.music-anxiete main video {
		width: 45%;
		height: auto;
		margin-top: 40px;
		float: right;
		margin-right: 5%
	}
	.music-anxiete main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		width: 90%;
		left: 5%;
		top: 55%;
		height: 35%;
		text-align: left;
		position: absolute;
	}

	.music-cigarette main video {
		width: 45%;
		height: auto;
		margin-top: 40px;
		float: right;
		margin-right: 5%
	}
	.music-cigarette main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		width: 90%;
		left: 5%;
		top: 55%;
		height: 35%;
		text-align: left;
		position: absolute;
	}
	.music-change main img {
		width: 45%;
		height: auto;
		margin-top: 40px;
		float: right;
		margin-right: 5%
	}
	.music-change main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		width: 90%;
		left: 5%;
		top: 55%;
		height: 35%;
		text-align: left;
		position: absolute;
	}
	.music-sacre main img {
		width: 33%;
		height: auto;
		margin-top: 40px;
		float: right;
		margin-right: 5%
	}
	.music-sacre main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		width: 50%;
		left: 5%;
		top: 15%;
		height: 57%;
		text-align: left;
		position: absolute;
	}
	.music-avec main figure:first-child img {
		width: 90%;
		max-width: 90%;
		height: auto;
	}
	.music-avec main figure:nth-child(2) img {
		width: 90%;
		max-width: 90%;
		height: auto;
	}

	.music-quiasu main {
		background-color: #000;
	}
	.music-quiasu main img {
		margin-top: 5%;
	}
	.music-quiasu main .quiasu {
		width: 100%;
		max-width: 100%;
    position: relative;
		margin: 2% auto;
	}

	body.music-rentre {
		background: url(/img/rentre.jpg) no-repeat;
		background-size: cover;
		background-color: #657785;
	}
	.music-rentre {
		background: none;
	}
	.music-rentre main {
		background: none;
	}
	.music-rentre main #rentre1 {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 16px;
		line-height: 26px;
		float: right;
		margin-right: 5%;
		margin-top: 6px;
	}
	.music-rentre main #rentre2 {
		float: left;
		width: 100%; 
	}
	.music-rentre main #rentre2 .pageA {
		width: 50%;
		height: auto;
		left: 0;
		float: left;
	}
	.music-rentre main #rentre2 .pageB {
		width: 50%;
		height: auto;
		left: 50%;
		float: right;
	}
	.music-rentre main #rentre2 img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
	.music-rentre main #rentre3 {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 16px;
		line-height: 26px;
		float: left;
		margin-left: 5%;
		text-align: left;
	}

	.music-msol main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		width: 50%;
		left: 5%;
		top: 15%;
		height: 57%;
		text-align: left;
		position: absolute;
	}
	.music-anxiete main video {
		width: 45%;
		height: auto;
		margin-top: 40px;
		float: right;
		margin-right: 5%
	}
	.music-anxiete main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		width: 90%;
		left: 5%;
		top: 55%;
		height: 35%;
		text-align: left;
		position: absolute;
	}
	
	.film-beat main video {
		width: 45%;
		height: auto;
		margin-top: 40px;
		float: right;
		margin-right: 5%
	}
	.film-beat main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #bc0c16;
		width: 90%;
		left: 5%;
		top: 55%;
		height: 35%;
		text-align: left;
		position: absolute;
	}

	.film-parisiennes main video {
		width: 31%;
		height: auto;
		margin-top: 40px;
		float: right;
		margin-right: 5%
	}
	.film-parisiennes main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #f5e67a;
		width: 90%;
		left: 5%;
		top: 40%;
		height: 35%;
		text-align: left;
		position: absolute;
	}

	.film-cat main figure {
		float: left;
		width: 60%;
		height: 100%;
		background-image: url("/img/film-cat.jpg");
		background-size: cover;
	}
	.film-cat main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #FFF;
		text-align: left;
		width: 40%;
		height: 90%;
		float: left;
		margin-top: 36px;
		padding: 0 10px;
	}

	body.film-globe {
		background-color: #543928;
	}
	.film-globe main img {
		width: 100%;
		max-width: 100%;
		height: auto;
		position: absolute;
		left: 0;
		top: 0;
	}
	.film-globe main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #f9cc16;
		position:absolute;
		top: 50%;
		left: 3%;
		text-align: left;
		width: 70%;
	}

	.film-blowup main .blowup {
		background-image:url(/img/blowup.jpg);
		background-repeat:no-repeat;
		background-size: contain;
		height: 100%;"
	}
	.film-blowup main .vspacer {
		float: left;
		width: 100%;
		height: 70%;
	}
	.film-blowup main .spacer {
		float: left;
		width: 0;
		height: 0;
	}
	.film-blowup main video {
		float: left;
		width: 100%;
	}
	.film-blowup main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #fa082a;
		text-align: left;
		width: 93%;
		padding: 0 3.5%;
	}

	.film-evidence main {
		background-color: #FFF;
	}
	.film-evidence main img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
	.film-evidence main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		text-align: left;
		width: 60%;
		padding: 0 24px;
	}
	.film-evidence main video {
		float: right;
		margin-top: 5%;
		margin-right: 5%;
		width: 35%
	}

	.film-maigret main {
		background-color: #FFF
	}
	.film-maigret main figure {
		float: left;
		width: 60%;
		height: 100%;
		background-image: url("/img/maigret-2.jpg");
		background-size: cover;
	}
	.film-maigret main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		text-align: left;
		width: 40%;
		height: 90%;
		float: left;
		margin-top: 36px;
		padding: 0 10px;
	}

	.film-faute main {
		background-color: #FFF
	}
	.film-faute main video {
		float: left;
		width: 40%;
		height: auto;
		margin-left: 5%;
		margin-top: 15%;
	}
	.film-faute main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		text-align: left;
		width: 45%;
		height: 90%;
		float: left;
		margin-top: 36px;
		margin-left: 5%;
		padding: 0 10px;
	}

	.film-clockwork main {
		background-color: #000
	}
	.film-clockwork main img.cwo-polaroid {
		width: 45%;
		height: auto;
		position: absolute;
		left: 1%;
		top: 30px;
	}
	.film-clockwork main img.cwo-title {
		width: 45%;
		height: auto;
		position: absolute;
		top: 50px;
		left: 50%;
		width: 40%;
	}
	.film-clockwork main span {
		color:#000;
		position: absolute;
		left: 53%;
		top: 110px;
	}
	.film-clockwork main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #FFF;
		position:absolute;
		top: 200px;
		left: 50%;
		text-align: left;
		width: 40%;
	}

	.music-zzb main {
		background-image:url(/img/zbb.jpg);
		background-repeat:no-repeat;
		background-size: center;
	}
	.music-zzb main .flexbox-container {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
	
		-ms-flex-align: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
	
		align-items: center;
		
		height: 100%;
		width: 100%;
	}
	.music-zzb main video {
		width: 25%;
		height: auto;
		margin-left: auto;
		margin-right: 1%;
		margin-top: 14vh;
	}

	main div.hide-on-large-only {
		float:left;
		width: 100%;
	}
	.music-sacre main div.hide-on-large-only {
		float:left;
		width: 20%;
	}
}

/* Desktop */
@media only screen 
and (min-device-width : 1025px) {
	body {
	 background-color: #000;
	}
	
	.container {
		max-width: 1670px;
		min-width: 1280px;
		width: 90%;
		position: relative;

		min-height: 100%;
		background: url(/img/bg.jpg) no-repeat center center fixed;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	#gh {
		position: absolute;
		bottom: 65px;
		width: 100%;
	}

	.intro-mem main.memo-bg-eng {
		background-image: url("/img/memo-bg-eng.jpg");
		background-size: cover;
		background-position: right bottom;
		width: 85%;
		height: 100%;
		position: absolute;
		left:15%;
	}
	
	.intro-mem main.memo-bg-fra {
		background-image: url("/img/memo-bg-fra.jpg");
		background-size: cover;
		background-position: right bottom;
		width: 85%;
		height: 100%;
		position: absolute;
		left:15%;
	}

	.bio-liaisons main div:first-child {
		float: left;
		width: 100%
	}
	.bio-liaisons main div:nth-child(2) {
		float: left;
		width: 18%;
	}
	.bio-liaisons main div:nth-child(3) {
		float: left;
		width: 82%
	}
	.bio-liaisons main div:nth-child(4) {
		float: left;
		width: 82%;
	}
	.bio-liaisons main img {
		width: 100%;
	}
	.bio-liaisons main .localtext {
		color: #564a38;
		font-family: 'Times New Roman', Times, serif;
		text-align: left;
		padding: 0 20px;
	}
	.bio-liaisons main .localtext h3 {
		margin-top: 0;
	}
	.bio-liaisons main .localtext p {
		text-align: justify;
		-moz-hyphens: auto;
	  -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
	}
	.bio-passport main img {
		width: 450px;
		max-width: 450px;
		height: 660px;
		top: 30px;
		left: 5.88%;
		position: absolute;
	}
	.bio-passport main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 14px;
		line-height: 28px;
		color: #0b5050;
		position:absolute;
		top: 300px;
		left: 440px;
		text-align: left;
		width: 400px;
	}
	.bio-passport main .localtext2 {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 14px;
		line-height: 28px;
		color: #aec5d1;
		position:absolute;
		top: 300px;
		left: 440px;
		text-align: left;
		width: 80px;
		white-space: nowrap;
		text-overflow: clip;
		overflow: hidden;
	}
	.bio-onaledge main img {
		width: 80%;
		max-width: 1000px;
		top: 0;
		left: 0;
		position: absolute;
	}
	.bio-onaledge main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #FFF;
		position:absolute;
		top: 50px;
		left: 58.82%;
		text-align: left;
		width: 35%;
	}
	.bio-agetendre main img {
		width: 100%;
		max-width: 100%;
		height: auto;
		min-width: 864px;
		min-height: 1169px;
	}

	.bio-owl main img {
		width: 30%;
		height: auto;
		position: absolute;
		left: 11.76%;
		top: 130px;
	}
	.bio-owl main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #c6e4e4;
		position:absolute;
		top: 100px;
		left: 47%;
		text-align: left;
		width: 40%;
	}

	.bio-blueguitar main img {
		width: 100%;
		max-width: 100%;
		height: auto;
		position: absolute;
		left: 0;
		top: 0;
	}
	.bio-blueguitar main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #1be8fa;
		position:absolute;
		top: 60%;
		left: 5.88%;
		text-align: left;
		width: 47%;
	}

	.music main img {
		width: 100%;
		height: auto;
	}
	.music-cest main img {
		width: 100%;
		max-width: 100%;
		top: 0;
		left: 0;
		position: absolute;
	}
	.music-cest main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #FFF;
		position:absolute;
		top: 50px;
		left: 59%;
		text-align: left;
		width: 39%;
		height: 90%;
		padding-right: 2%;
	}
	.music-anxiete main video {
		width: 47%;
		height: auto;
		float: right;
		margin-top:60px;
		margin-right:5.88%;
	}
	.music-anxiete main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		width: 88.24%;
		left: 5.88%;
		top: 60%;
		height: 35%;
		text-align: left;
		position: absolute;
		padding-right: 10px;
	}
	.music-cigarette main video {
		width: 35.28%;
		height: auto;
		top: 40%;
		left: 5.88%;
		position: absolute;
	}
	.music-cigarette main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		width: 47.04%;
		left: 47.04%;
		top: 40%;
		height: 35%;
		text-align: left;
		position: absolute;
		padding-right: 10px;
	}
	.music-change main img {
		width: 35.28%;
		height: auto;
		top: 40%;
		left: 5.88%;
		position: absolute;
	}
	.music-change main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		width: 47.04%;
		left: 47.04%;
		top: 40%;
		height: 35%;
		text-align: left;
		position: absolute;
		padding-right: 10px;
	}
	.music-sacre main img {
		width: 23.52%;
		height: auto;
		top: 40%;
		left: 5.88%;
		position: absolute;
	}
	.music-sacre main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		width: 58.8%;
		left: 35.28%;
		top: 40%;
		height: 50%;
		text-align: left;
		position: absolute;
		padding-right: 10px;
	}
	.music-avec main figure:first-child img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
	.music-avec main figure:nth-child(2) img {
		width: 90%;
		max-width: 90%;
		height: auto;
	}

	.music-quiasu main {
		background-color: #000;
	}
	.music-quiasu main img {
		margin-top: 5%;
	}
	.music-quiasu main .quiasu {
		width: 65vh;
		max-width: 50vw;
    position: relative;
		margin: 2% auto;
	}

	.music-rentre main #rentre {
		width: 50%;
		max-width: 50%;
		height: auto;
		left: 50%;
		position: absolute;
	}
	.music-rentre main #rentre1 {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 16px;
		line-height: 26px;
		float: right;
		margin-right: 5%;
		margin-top: 56px;
	}
	.music-rentre main #rentre2 {
		float: left;
		width: 100%; 
	}
	.music-rentre main #rentre2 .pageA {
		width: 50%;
		height: auto;
		left: 0;
		float: left;
	}
	.music-rentre main #rentre2 .pageB {
		width: 50%;
		height: auto;
		left: 50%;
		float: right;
	}
	.music-rentre main #rentre2 img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
	.music-rentre main #rentre3 {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 16px;
		line-height: 26px;
		float: right;
		margin-left: 5%;
		text-align: left;
		width: 50%;
	}

	.music-msol main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		width: 58.8%;
		left: 35.28%;
		top: 40%;
		height: 50%;
		text-align: left;
		position: absolute;
		padding-right: 10px;
	}

	.film-beat main video {
		width: 47%;
		height: auto;
		float: right;
		margin-top:60px;
		margin-right:5.88%;
	}
	.film-beat main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #bc0c16;
		height: calc(90% - 500px);
		text-align: left;
		width: 47%;
		float: right;
		clear: right;
		margin-top: 36px;
		margin-right: 5.88%;
		padding-right: 10px;
	}

	.film-parisiennes main video {
		width: 30%;
		height: auto;
		float: right;
		margin-top:60px;
		margin-right: 3.0%;
	}
	.film-parisiennes main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #f5e67a;
		text-align: left;
		width: 70%;
		height: 50%;
		float: right;
		clear: right;
		margin-top: 36px;
		margin-right: 3.0%;
		padding-right: 10px;
	}

	.film-cat main figure {
		float: left;
		width: 60%;
		height: 100%;
		background-image: url("/img/film-cat.jpg");
		background-size: cover;
	}
	.film-cat main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #FFF;
		text-align: left;
		width: 40%;
		height: 90%;
		float: left;
		margin-top: 36px;
		padding: 0 10px;
	}

	.film-globe main img {
		width: 100%;
		max-width: 100%;
		height: auto;
		position: absolute;
		left: 0;
		top: 0;
	}
	.film-globe main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #f9cc16;
		position:absolute;
		top: 60%;
		left: 3%;
		text-align: left;
		width: 70%;
	}

	.film-blowup main .blowup {
		background-image:url(/img/blowup.jpg);
		background-repeat:no-repeat;
		background-size: cover;
		height: 100%;"
	}

	.film-blowup main .vspacer {
		float: left;
		width: 100%;
		height: 70%;
	}
	.film-blowup main .spacer {
		float: right;
		width: 0;
		height:110%;
	}
	.film-blowup main video {
		float: right;
		clear: right;
		margin-right: 10%;
	}
	.film-blowup main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #fa082a;
		text-align: left;
		width: 90%;
		padding-left: 10%;
	}

	.film-evidence main {
		background-color: #FFF;
	}
	.film-evidence main img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
	.film-evidence main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		text-align: left;
		width: 60%;
		padding: 0 24px;
	}
	.film-evidence main video {
		float: right;
		margin-top: 5%;
		margin-right: 5%;
		width: 35%
	}
	
	.film-maigret main {
		background-color: #FFF
	}
	.film-maigret main figure {
		float: left;
		width: 60%;
		height: 100%;
		background-image: url("/img/maigret-2.jpg");
		background-size: cover;
	}
	.film-maigret main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		text-align: left;
		width: 40%;
		height: 90%;
		float: left;
		margin-top: 36px;
		padding: 0 10px;
	}

	.film-faute main {
		background-color: #FFF
	}
	.film-faute main video {
		float: left;
		width: 40%;
		height: auto;
		margin-left: 5%;
		margin-top: 20%;
	}
	.film-faute main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #000;
		text-align: left;
		width: 45%;
		height: 90%;
		float: left;
		margin-top: 36px;
		margin-left: 5%;
		padding: 0 10px;
	}

	.film-clockwork main {
		background-color: #000
	}
	.film-clockwork main img.cwo-polaroid {
		width: 45%;
		height: auto;
		position: absolute;
		left: 1%;
		top: 80px;
	}
	.film-clockwork main img.cwo-title {
		width: 45%;
		height: auto;
		position: absolute;
		top: 100px;
		left: 50%;
		width: 40%;
	}
	.film-clockwork main span {
		color:#000;
		position: absolute;
		left: 53%;
		top: 160px;
	}
	.film-clockwork main .localtext {
		font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
		font-size: 18px;
		line-height: 28px;
		color: #FFF;
		position:absolute;
		top: 250px;
		left: 50%;
		text-align: left;
		width: 40%;
	}

	.music-zzb main {
		background-image:url(/img/zbb.jpg);
		background-repeat:no-repeat;
		background-size: cover;
	}
	.music-zzb main .flexbox-container {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
	
		-ms-flex-align: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
	
		align-items: center;
		
		height: 100%;
		width: 100%;
	}
	.music-zzb main video {
		width: 25%;
		height: auto;
		margin-left: auto;
		margin-right: 1%;
		margin-top: 30vh;
	}
}


footer {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 50px;   /* Height of the footer */
   background: #6cf;
}

.row {
	margin-bottom: 0;	
}

ul.side-nav.fixed {
	background-color: transparent;
	box-shadow: none;
	height: calc(100% - 150px);
  left: 0;
	top: 100px;
  position: absolute;
}

ul.side-nav.fixed a {
	padding-right: 0;
}

ul.side-nav {
	padding-bottom: 0;
	width: 15%;
}

.heart {
	position: absolute;
  bottom: 25px;
}

@media only screen and (max-device-width : 992px) {
	header, main, footer {
		padding-left: 0;
	}
}
	
/*
 *
 #menu_div 	{
	width: 160px;
	min-height: 100%;
	left: 0px;
	top: 0px;
}
*/

.side-nav a {
	font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
	font-size: 30px;
	text-decoration: none;
	line-height: 8vh;
	letter-spacing: 3px;
	padding-right: 15px;
}

ul.side-nav li:hover, ul.side-nav li.active {
	background-color: transparent;
}


#slide-out.side-nav a {
	line-height: 2.0;
}

a {
  color: white;
}

#slide-out li:last-child {
	padding-top: 15px;
}

			
#menu_div A { font-family:Futura,"Century Gothic",AppleGothic,sans-serif; font-size: x-large; color:#FFF; text-decoration: none; margin-left: 30px; border: 0px;}


.intro-pic #subnav {
	color: #000;	
}

.bio-blueguitar #subnav {
	color: #1be8fa;	
}

#subnav a {
	text-decoration: none;
	color: inherit;
	font-size: large;
}

#marquee		{
	background-color: #a0ddcb;
	vertical-align: middle;
	width: 100%;
	height: 50px;
}

#marquee p  {
	font-family: Garamond;
	font-size: x-large;
	font-weight: 600;
	color :#145626;
	margin-top: 0;
	margin-bottom: 0;
	line-height: 50px;
}


/* 
.text			{ font-family:Futura,"Century Gothic",AppleGothic,sans-serif; font-size: medium; margin-top: 0px; line-height: 130%; }
 */

.rio_beni{
	color:#ebeaee;
	margin-left:60%;
	font-style: italic;
	line-height: 5px;
}

.img_shadow { -webkit-box-shadow: 0 2px 5px #666;}



/* picture flip effect */
.block 		{ -webkit-transform-style: preserve-3d; -webkit-transition: -webkit-transform 1.5s; }
.rotated 	{ -webkit-transform: rotateY(180deg);}
.side			{ position: absolute; -webkit-backface-visibility: hidden; -webkit-box-shadow: 0 2px 5px #666; }
.back			{ -webkit-transform: rotateY(180deg); }


/* iScroll */
.myScrollbarH 		{position:absolute;z-index:100;height:7px;bottom:1px;left:2px;right:7px}
.myScrollbarH > div {height:100%;}

.myScrollbarV 		{position:absolute;z-index:100;width:7px;bottom:7px;top:2px;right:1px}
.myScrollbarV > div {width:100%;}


.myScrollbarH > div,
.myScrollbarV > div {position:absolute;z-index:100;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;border-width:3px;-webkit-border-image:url(img/scrollbar.png) 6 6 6 6;-moz-border-image:url(img/scrollbar.png) 6 6 6 6;-o-border-image:url(img/scrollbar.png) 6 6 6 6;border-image:url(img/scrollbar.png) 6 6 6 6;}