@charset "utf-8";

@font-face {
	font-family: 'helveticaneuelight';
	src: url('helveticaneuelight-webfont.eot?iefix') format("embedded-opentype");
	src: local('?'), url('helveticaneuelight-webfont.eot') format("embedded-opentype"), url('helveticaneuelight-webfont.ttf') format('truetype'), url('helveticaneuelight-webfont.woff') format('woff');
}
@font-face {
	font-family: 'helveticaneue';
	src: url('helveticaneue-webfont.eot?iefix') format("embedded-opentype");
	src: local('?'), url('helveticaneue-webfont.eot') format("embedded-opentype"), url('helveticaneue-webfont.ttf') format('truetype'), url('helveticaneue-webfont.woff') format('woff');
}
html body{
border: 0 none;font-family: inherit;font-feature-settings: inherit;font-kerning: inherit;font-language-override: inherit;font-size: 100%;font-size-adjust: inherit;
font-stretch: inherit;font-style: inherit;font-synthesis: inherit;font-variant: inherit;font-weight: inherit;line-height: inherit;margin: 0;padding: 0;vertical-align: baseline;
	overflow:auto;height:100%;width:100%;
}
.tabsolde,h2,h3,h5,.tablo{border-color:#7ca8bf;border-style:solid;border-width:1px;
border-collapse:inherit;}
.even{height:30px;background-color:#F5F5F5;}
.even:hover{background-color:#92becc;background-image:url(images/trb.gif);}
medium,little{display:none}
large{color:white;margin-left:200px}
sombre{position:fixed;background-color: rgba(105,105,105,0.85);width:100%;bottom: 0px;top:0px;height:100%;z-index:1090;display: flex;align-items: center;justify-content: center;}
blanc{ max-width: 50%;background-color: azure;width:300px;height:auto;padding:30px;}
blanc,sombre,logo,oo,#menuresp,menresp,resp,#resp_haut,#zaffiche,#resp1{display:none;}
#menresp a{color:white;text-decoration: none}



#tv{position:relative;width:100vw}
video{z-index:6;width:100vw;}
#page1{overflow: hidden;top: 0;right: 0;bottom: 0;left: 0;height:100vh;width:100%;box-sizing: border-box;}

#page1 > video {width: 100vw;height: 100%;top: 0;left: 0;object-fit: cover;overflow: hidden;}

.fleche1 {z-index:1000;width:100%;position:absolute;bottom:150px;text-align:center;}
cadenas{z-index:1090;top:20px;position:absolute;}
contact{z-index:1090;top:20px;position:absolute;right:20px;color:white;}
contact a {color:white;}
#progra{background-color: black;}
#afficheg{

	position:fixed;
	width:100vw;
	height:100vh;
	background-color:#b2dae8;
	z-index:5000;
	text-align:center;
}
#wrapaffiche{
width:90%;
margin:0 auto;
	
}
face{z-index:1002;width:100%;margin:0 auto;position:absolute;top:20px;right:20px;text-align:right;}
resp{z-index:1002;width:100%;margin:0 auto;position:absolute;top:80px;text-align:left;	}
fleche2 {z-index:1000;width:100%;height:auto;margin-top:20px;text-align:center;}

#page3 {background-color: #f8b258;color:white;padding-left:30px;padding-right:30px;}
#page3 a {color:white;}
button{ color:aliceblue;}

#conteneur{left:5%;width:60%;height:auto;min-height:1000px;position: absolute;top:10%;box-sizing: border-box;max-width:60%;}
#panneaux{display:flex;justify-content: space-between;width:100%;}
#intro{flex:2;background-color: #1b191a;}
#haut{flex:1;margin-left:1%;}
#bas{flex:1;margin-left:1%;}
#test3,#test4{margin-top:4%;}
.menu{border: solid #FBFBFB 1px;text-align:center;margin:0 auto;position:relative;}



#titre{color:white;font-size:3vw;font-family: 'helveticaneuelight';}
lieunom{color:black;font-size:1.8em;font-family: 'helveticaneuelight';}


#blabla{color:grey;padding:15px;border: solid #FBFBFB 1px;font-size:1.5vw;background-color: #00b3de;}

#progra{color:white;padding:15px;	background-color: #f2f5d2;}


#cadre_progra{display:flex;width:100%;

justify-content: space-between;
margin-top:20px;

}
#un,#deux,#trois{flex:1;}

#deux,#trois{margin-left:30px;}

.coul{background-color:#eeefe1;}


.cube-titre1 , .cube-titre2 , .cube-titre3 , .cube-titre4 {position:absolute;display:block;width:100%;opacity:0;bottom: 0px;text-align: center;padding-top:7px;height: 30px;background: #e5e231;color: black;}
.cube-titre1 a , .cube-titre2 a , .cube-titre3 a , .cube-titre4 a {color:black; text-decoration:none; display:block;}

#test3:hover ,#test2:hover {cursor:pointer;}



footer{background-color: #373736;height:auto;width:99vw;}
footer img{width:99vw;}
#resp1{color:white;margin-left:300px;}

.infosub{display:flex;color:#ec6448;}
.infoerr{margin-left:20px;}




.prog , .scene{font-size:3em;font-family: 'helveticaneuelight';font-weight: bolder;margin-left:180px;}
.prog{color:#ec6448;margin-top:50px;}
.scene{color:#f2f6e0;}



#page2{height: 100%;left: 0;overflow: hidden;background-color: #f4c537;width: 100%;
overflow-x: hidden;}
#artiste{display:flex;justify-content: space-around;flex-wrap: wrap;
overflow-x: hidden;box-sizing: border-box;width:100%;margin-top:25px;}


.element{margin-top:10px;width:300px;height:300px;background-repeat: no-repeat;background-position: center center;background-size: 100% auto;transition: all 500ms ease 0s;z-index:100;overflow:hidden;}









.tes{font-size:1.4em;bottom:0px;height:40px;opacity:1;width:100%;color:white;text-shadow: 1px 2px 6px black;text-transform: none;margin-top:230px;margin-left:15px;font-weight: bold;z-index:2000;}


.element:hover  {opacity:1;cursor: pointer;background-repeat: no-repeat;background-position: center center;background-size: 110% auto;display: inline-block;overflow: hidden;padding: 0;
position: relative;transition: all 500ms ease 0s;}
.info{position:absolute;margin-left:15px;color:white;font-family: "Calibre",sans-serif;font-size: 0.75rem;font-weight: 600;text-transform: uppercase;}
.groupe{margin-top:150px;margin-left:50px;font-size:4em;font-family: 'helveticaneuelight';	color:white;text-shadow: 1px 2px 6px black;	}
#phgroupe{position:absolute;width:1000px;height:260px;}

prem{display : flex;flex-wrap: wrap;flex-direction: row;margin:0; padding:0;}
prem img{width:30.4vw;height:auto;}
nation, eau,portuaire, petyt,vanstabel, entrepot,carte,kili,siemens,cambuse,phare,terrasse{position:relative;color:white;height:auto;flex:1;margin-top:20px;}

lieunom{color:#e5e231;margin-left:40px;}
imagelieu{z-index:1}
#google{text-align:center; width:100%;}
desc{border-top : white solid 1px;padding-top:8px;font-style: italic;}
lieunom{position:absolute;top:20px; left:15px;z-index:2;font-size:200%;font-family: 'helveticaneuelight';color:white;text-shadow: 1px 2px 6px black;}
groupelieu{position:absolute;bottom:20px; left:15px;z-index:2;font-size:100%;}
#listescene{padding-left:30px;padding-right:30px;justify-content: space-around;display:flex;flex-wrap: wrap;}
#test2:hover  .cube-titre2, #test3:hover  .cube-titre3{
    opacity:1;
	-webkit-transition: all 1s cubic-bezier( .6, 2, .4, 1);
    -moz-transition: all 1s cubic-bezier( .6, 2, .4, 1);
     -ms-transition: all 1s cubic-bezier( .6, 2, .4, 1);
      -o-transition: all 1s cubic-bezier( .6, 2, .4, 1);
         transition: all 1s cubic-bezier( .6, 2, .4, 1);
}

.menu a , #test3, #haut a{color:black; text-decoration:none; }

/*#############################################################"""
################### 1000 px###################################"
#############################################"*/

@media screen and (max-width: 1800px) {


#titre{color:white;font-family: 'helveticaneuelight';}	
	
#test3,#test4{}
}

@media screen and (max-width: 1700px) {


#test3,#test4{}

}









@media screen and (max-width: 1000px) {
large,little{display:none}
medium{display:block;color:white;margin-left:200px}
	
html { background-color: #232323; }
video, face ,resp,#panneaux,titre,#conteneur,fleche1,fleche2{ display: none; }
	#page1{margin:0;padding: 0;}	

	#menuresp,#resp_haut,#zaffiche,logo,#oo{display:block}
	logo{width:133px;}
	
	#page1{height:auto;}
	#resp_haut{width:100%;position:fixed;z-index: 1200;padding:5px;display:flex;height:50px;top:0px;
	overflow: hidden;
	justify-content: space-between;background-color: #1b191a;
		
	}
	titreresp{font-size:1em; color:white;position:absolute;}
	#oo{width:50px;height:50px;position:absolute;top:0px;right:10px;} 

	.pro{font-size:1.5em; }
	affiche{display:block;position:relative;margin-top:50px;}
	#zaffiche{width:100vw;}
	menresp{margin :0 auto;width:100vw;top:50px;position:fixed;z-index: 1200;background-color:firebrick;}
	menresp ul {list-style: none; margin:0 0 0 0;padding: 0;}
	menresp ul li{border-top:1px solid white;height:30px;padding-top:10px;padding-left:5px;color:white; background-color: rgba(255, 255, 255, 0.1);}
	menresp ul li:hover{background-color: rgba(255, 255, 255, 0.2);}
	menresp ul li:last-child{border-bottom:1px solid white;}
	menresp ul li a {display:block;color:white; text-decoration:none; }
	
	
	.prog, #scene{font-size:1.3em;margin-left:20px;}
	#artiste{padding:1px 0 1px 0;z-index:10;}
	.element{width:50%;}
	
	#page3{padding-left:0px;padding-right:0px;}
	
	#bas{width:100%;display:flex;justify-content: space-between; flex-direction: column;}
	#haut{width:100%;display:flex;justify-content: space-between;flex-direction: column;}
	#intro{width:97%;height:auto;font-size:2.7rem}
	.menu{width:99%;background-repeat: no-repeat;}
	#resp1{display:block;font-size:4em;}
	
	prem img{width:49vw;}

	#page2{display: inline-block;}

#blabla{font-size:2.5vw;}

	
}
@media screen and (max-width: 480px) {
large,medium{display:none}
little{display:block;color:white;margin-left:200px}
	.element{width:100vw}
	prem{flex-direction:column;}
	prem img{width:100vw;height:auto;}
}


/*#############################################################"""
####################################################################"
#############################################"*/