@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300);
@import url(https://fonts.googleapis.com/css?family=Pathway+Gothic+One);

/*
html{
	height:100%;
	font-size:100%;
}
*/
body{
	height:100%;
	margin:0;
	font-size:1.05em;	
	font-size:1em;	
	color:#fff;	
}

img{
	border:0;
}

section img{
	width:100%;
	vertical-align:top;
}




/* --------------- */
/* LINKS | GENERAL */
/* --------------- */

a{
	color:#fff;
	text-decoration:none;
	font-weight:normal;
	transition:opacity 150ms;
}

a:hover{
	text-decoration:none;
	font-weight:normal;
	opacity:0.3;
}



.menuSelected{
	color:#bce;
}



h1{
	margin-top:30px;
	margin-bottom:30px;
	text-align:center;
	line-height:1em;
	font-family: 'Lato', sans-serif;
	font-style:italic;
	font-size:2.5em;
	font-weight:normal;
	letter-spacing:0.01em;
	color:#bce;
}

@media screen and (max-width:400px){
	h1{
		margin-bottom:25px;
	}
}

h2{
	margin-top:0;
	margin-bottom:20px;
	font-family: 'Pathway Gothic One', sans-serif;
	font-size:1.5em;
	font-weight:300;
}

h2 strong{
	font-weight:400;
}

p{
	margin:0 0 20px 0;
}

iframe{
	border:0;
}

figure{
	margin:20px 0;
}

figcaption{
	text-align:right;
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.8em;
	color:#999;
}

.nb{
	filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

html {
  background: url(img/2024/iD_0K4A9165_100_72_SD.jpg)no-repeat fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color:black;
}


@media screen and (max-width:500px){
	html {
    background: url(img/2024/iD_0K4A9165_100_72_SD.jpg) no-repeat;
    background-position-x: 28%;
    background-size: 500%;
	}
}


#background_ctn{
	position:fixed;
	z-index:-1;
	width:100%;
	height:100%;
	overflow:hidden;
	opacity:0;
	transition:opacity 300ms;
}

#videoBgCtn{
	position:fixed;
	z-index:0;
	width:100%;
	height:100%;
	overflow:hidden;
}

@media screen and (max-width:500px){
	#videoBgCtn{
		display:none;
	}
}

#videoTrame{
  	position:fixed;
	z-index:-1;
	width:100%;
	height:100%;
	overflow:hidden;
	background:url(img/2024/iD_0K4A9165_100_72_SD.jpg);
	transition:opacity 300ms;
}

#bgTristan{
	position:fixed;
	z-index:2;
	width:100%;
	height:100%;
	background:url(img/tristan-profil-2.png);
	background:url(img/the-avener-shadow.png);
	background-repeat:no-repeat;
	background-position:bottom right;
	transition:opacity 500ms, margin-left 500ms;
}

@media screen and (max-width:850px){
	#bgTristan{
		display:none;
	}
}



#main{
	height:100%;
	opacity:1;
}




#header{
	width:100%;
	margin:0;
	padding:0;
	background-color:#000;
	transition:margin-top 400ms;
}

header nav{
	height:56px;
	padding:10px 10px 0 10px;
	padding:5px 0 0 10px;
	padding:10px 5px 5px 5px;
	overflow:hidden;
}

@media screen and (max-width:600px){
	header nav{
		text-align:center;
	}
}


header .logo, .menu-content, .fb-like-ctn{
	display:inline-block;
	vertical-align:top;
	margin:0 5px;
}

header .to_mobile_menu{
	display:none;
}

@media screen and (max-width:600px){
	header .to_mobile_menu{
		display:inline-block;
		transition:opacity 200ms;
	}
	
	header .to_mobile_menu:hover{
		opacity:0.5;
	}
}



header nav ul{
	display:inline-block;
	height:50px;
	margin:0;
	padding:0;
}

header nav li{
	display:inline;
	vertical-align:middle;
	line-height:50px;
	padding-right:7px;
	list-style:none;
	font-family: 'Pathway Gothic One', sans-serif;
	font-weight:normal;
	font-size:1.3em;
}

@media screen and (max-width:750px){
	header nav .ul-rs{
		display:none;
	}
}


header .fb-like-ctn{
	display:inline-block;
	height:50px;
	vertical-align:top;
	overflow:hidden;
}

@media screen and (max-width:850px){
	header .fb-like-ctn{
		display:none;
	}
}

header .ico-menu-mobile{
	width:50px;
	height:50px;
	margin:0;
	display:none;
	cursor:pointer;
}

@media screen and (max-width:850px){
	header .ico-menu-mobile{
		display:inline-block;
	}
}

header .logo-the-avener{
	margin:0 0 5px 0;
	vertical-align:middle;
}

.icone-rs{
	width:19px;
	height:19px;
	margin:0;
	border:0;
}

.icone-rs:hover{
	opacity:0.6;
	transition:opacity 200ms;
}

header .fb-like{
	padding:0;
	vertical-align:top;
	margin-top:14px;
}

header #social-button-ctn .spotify-ctn{
	display:inline-block;
	vertical-align:bottom;
	margin:0;
	padding:0;
	border:none;
	overflow:hidden;
}




#section{
	position:relative;
	display:block;
	width:100%;
	max-width:500px;
	margin:0;
	padding:0;
	background-color:#171717;
	font-family: 'Lato', sans-serif;
	font-size:1em;
	font-weight:300;
	overflow:hidden;
	opacity:1;
	transition:opacity 400ms, margin-left 400ms;
}




.back_btn{
	font-size:0.77em;
	cursor:pointer;
}

.back_btn:hover{
	opacity:0.5;
}

.back_btn img{
	vertical-align:baseline;
	width:10px;
	height:10px;
}




#switch_section{
	position:absolute;
	z-index:2;
	right:0;
	width:30px;
	height:30px;
	background:url(img/switch.png);
	cursor:pointer;
	transition:opacity 200ms;
}

#switch_section:hover{
	opacity:0.5;
}

@media screen and (max-width:600px){
	#switch_section{
		display:none;
	}
}




.bouton{
	display:inline-block;
	margin:10px 0;
	padding:10px;
	background-color:#fff;
	color:#000;
	font-family: 'Lato', sans-serif;
	font-weight:300;
	cursor:pointer;
}

@media screen and (max-width:400px){
	.bouton{
		display:block;
		text-align:center;
	}
}

.bouton-inactif{
	display:inline-block;
	margin:5px 0;
	padding:0 10px;
	background-color:#fff;
	color:#000;
	font-family: 'Lato', sans-serif;
	opacity:0.3;
}

.boutons-damier-ctn{
	margin-bottom:20px;
	font-size:0;
}

.bouton-damier{
	display:inline-block;
	box-sizing:border-box;
	margin:0;
	padding:10px;
	width:50%;
	background-color:white;
	font-family: 'Lato', sans-serif;
	font-size:1rem;
	color:black;
	border:1px solid #111;
}




footer{
	position:static;
	width:100%;
	padding:0;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
}

.copyright a{
	text-decoration:none;
	border:0;
	color:#999;
}

.copyright a:hover{
	text-decoration:none;
	border:0;
	color:#999;
}

footer nav{
	height:auto;
	padding:10px 0;
	font-size:2rem;
	background-color:#111;
}

footer nav ul{
	display:block;
	width:100%;
	height:auto;
	margin:0 0 10px 0;
	padding:0;
}

footer nav li{
	display:block;
	padding:0;
	font-family: 'Pathway Gothic One', sans-serif;
}

footer nav .ul-rs{
	margin:10px 0 0 0;
}

footer nav .ul-rs li{
	display:inline-block;
	margin:0 10px;
	font-size:1rem;
}

footer nav .ul-rs a{
	
}

footer nav .close-menu{
	display:block;
	margin-top:10px;
	margin-bottom:15px;
	font-family: 'Pathway Gothic One', sans-serif;
	font-size:0.75em;
	cursor:pointer;
}

footer .copyright{
	padding:10px 0;
	font-size:0.7em;
}

@media screen and (min-width:768px){
	footer nav{
		display:none;
	}
}




.pixel-ctn{
	display:inline;
}

.pixel-ctn img{
	border-style:none;
}




/* INFO-BULLE VIDEO */

#info-bulle-video{
	position:absolute;
	top:100%;
	margin-top:-180px;
	left:100%;
	margin-left:-290px;
	width:220px;
	height:100px;
	padding:20px;
	background-color:rgba(0, 0, 0, 0.8);
	font-family: 'Lato', sans-serif;
	font-size:0.9em;
	letter-spacing:-0.05em;
	opacity:0;
	transition:opacity 500ms linear 1000ms;
	
	display:none;
}

@media screen and (max-width:850px){
	#info-bulle-video{
		display:none;
	}
}




/* MODULE NEW COVER */

.newcover{
	width:800px;
	height:600px;
}