* 		{ margin:0;padding:0;}
html 	{background: rgb(131,59,150) ;font-family:Archivo Narrow, sans-serif;color: rgb(243,124,33);}
a,a:visited,a:hover		{ text-decoration:none; font-weight: 700; color:rgb(243,124,33); }


/*---- HEADER ----*/

.header 		 { width:1024px;position:relative;}
#topheader	{position: absolute;width:1024px;height: 60px;padding-top: 5px;text-align: right;font-variant: small-caps;font-size: 20px;display: block;z-index: 99;background-color: rgb(131,59,150)}
#head-center 	 {position: relative; width:100%;margin:auto;padding-top: 100px;background-color: rgb(131,59,150);}
#head-center img {position: relative;width: 100%}
#head-center h1	 { display:inline;color:rgb(243,124,33);font-size:30pt;background-color: rgb(131,59,150);}
#logo {display: block;float: left;margin-left: 10PX;}	

.minimenu{position: relative;top: 10px; padding-right: 25px;font-size: 12pt}

#social-network{ position: relative;display: block; top:0; right: 5px;float: right;padding-left: 25px;}
#social-network a:hover {webkit-moz-opacity:0.5; webkit-o-opacity:0.5;webkit-opacity:0.5; opacity: 0.5;webkit-transition: all linear 0.5s; transition: all linear 0.5s;}
#social-network a{webkit-moz-opacity:1; webkit-o-opacity:1;webkit-opacity:1; opacity: 1;}
#social-network img {width:40px;}

/* ---- VIDEO ----*/

#videoreport{position: relative; width: 100%; height: 350px; margin: 0 auto 10px;top:0px;text-align: center;z-index:98;display: block;}

/*---- EDITO ----*/

#edito   {width:1024px;margin:0 auto;padding: 40px 10px;display: block;}
#edito p, #edito h2 { text-align: justify;padding:10px 80px 0 40px; color: rgb(243,124,33);}	#edito h2{font-size: 1.8rem;}
#edito .firstedito:first-letter{ font-size: 400%;float: left;font-weight: 700;margin: -20px 5px 0 0; color: rgb(225,125,177); }
#edito .exposition{ font-size: 1.5rem;text-align: center;font-weight: 700;color: rgb(243,124,33); }
h2, h3 {color: rgb(243,124,33);} #head-center h2 {font-size: 4rem; margin-top: -20px}

#button-container{width:1024px;margin:0 auto;text-align: center;}
#retro     	   { width:200px;margin:0 auto;background-color:rgb(243,124,33) ;;height:50px;line-height:50px;font-size:16pt;display: inline-block;text-align: center;}
#retro a 	   { color:rgb(35,31,32);display:inline-block;padding:0 10px;}
#retro a:hover { background-color:rgb(243,124,33) ;color:rgb(35,31,32)}

#document     	   {margin:0 auto;background-color:rgb(243,124,33) ;;height:50px;line-height:50px;font-size:16pt;display: inline-block;text-align: center;}
#document a 	   { color:rgb(35,31,32);display:inline-block;padding:0 10px;}
#document a:hover { color:rgb(35,31,32);background-color:rgb(243,124,33) ;}

/*---- MAIN ----*/

.main  { width:1024px;margin:0 auto;position:relative;padding:0;background-color: rgb(131,59,150);}

#content{width:1004px ;position: relative;top:-30px;padding:0 10px;background-color: rgb(131,59,150);}

/* #lieu 	 {width:100%;height:80px;background:rgb(35,31,32);color:rgb(243,124,33)} */
#lieu h2 { font-size:55px;line-height:80px;color:rgb(35,31,32);padding-left:30px;font-weight: 400}
#lieu h3 { font-size:40px;line-height:80px;color:rgb(35,31,32);padding-left:30px;font-weight: 400;margin-top: 5px;}
#lieu .reserver{position:relative; top:20px; float: right; padding-right: 10px}

#theatredenis, #egliseanglicane, #conférence, #ateliers{position: relative;width: 100%; height: 60px}
#date { background:rgb(35,31,32);color:rgb(243,124,33);font-size:20pt;width:300px;height:50px;line-height:50px;text-align:center;}

/* ---- MAIN V2.0.0 : artistes en banners ---- */

#lieu, #jour { width:100%;height:80px;color:rgb(35,31,32); background-color:rgb(243,124,33);}
#lieu h2, #jour h2 { font-size:55px;line-height:80px;color:rgb(35,31,32);padding-left:30px;font-weight: 400}
#lieu {margin-bottom: 10px;}

/*.jour1{background-color: rgb(21,161,94)}
.jour2{background-color: rgb(241,131,180)}
.jour3{background-color: rgb(241,101,51)}
.jour4{background-color: rgb(84,186,200)} */

.day {position: relative;width: 100%; height:293px;display: block;margin-bottom: 10px;}
.large{position: relative;width: 100%;display: block;height: auto;background: rgb(131,59,150);margin: 2px;}
.big img, .small img,.large img{position: absolute;top: 0;left: 0; width: 1000px !important}
.big .name, .large .name {position:relative; background: rgb(255,255,255); height: 20px; padding: 5px 60px 5px 10px; color: rgb(35,31,32);font-size: 25px;}
.details{position: relative;top:10px;right: 10px;text-align: right;z-index: 2;line-height: 43px;font-weight: 700;}

#left   { float:left;width:320px;margin-left:20px;}
#right  { float:right;width:320px;margin-left:20px;}
#center { float:right;width:320px;margin:0 auto;}

#groupe 	{}
#groupe img { width:1000px;height:293px;}
#groupe h2  { color:rgb(243,124,33);font-weight:200;font-size:22pt;text-align:center;}
#groupe a   { margin:0 auto;background:rgb(255,255,255);display:block;width:200px;}
#groupe img:hover { opacity:0.5;transition-duration: 0.8s;}

#clear {clear: both;}

#mediatheque    { width:1024px;}
#mediatheque h2 { font-size:30pt;height:60px;line-height:60px;padding-left:20px;color:rgb(243,124,33);}
#mediatheque h3{padding-left: 20px;font-size: 20pt}
#mediatheque h4{padding-left: 20px;font-size: 16pt}
#mediatheque p  { padding:0 20px;text-align:justify;color:rgb(243,124,33);}

#media-texte    { float:left;width:460px}
#media-map      { float:right;width:400px}

.infos   { position:relative;height:350px;width:1000px;}
.info  {padding: 10px 20px}

#reservation{width: 100%;display: block;}

.covid	{padding: 10px 20px; text-align: center;}

#tarifs    { float:left;width:400px; height:60px;background-color:rgb(35,31,32) ;}
#tarifs h2 { font-size:30pt;line-height:60px;color:rgb(243,124,33);font-weight: 400;text-align:center;}

#pass		 { position:relative;color:rgb(243,124,33);height:175px;}
#pass strong { color:rgb(243,124,33);}

#pass1  { float:left;width:100px;margin-left:20px}
#pass2  { float:right;width:100px;}
#pass3	{ float:right;width:100px;margin-left:40px;}
#carte { width:380px; margin-left:20px;padding-top: 10px;float: left;}

#places      { float:right;width:400px;height:60px;background-color:rgb(35,31,32) ;}
#places h2   { font-size:30pt;line-height:60px;color:rgb(243,124,33);font-weight: 400;text-align:center;}
#places p    { color:rgb(243,124,33);margin-left: 20px;}

.maps 		 { position:relative;}
.maps p 	 { padding-left:20px;}

#map-theatre    { float:left;width:400px;}
#map-theatre h2 { font-weight:400;font-size:22pt;color:rgb(243,124,33);}

#map-eglise    { float:right;width:400px;}
#map-eglise h2 { font-weight:400;font-size:22pt;color:rgb(243,124,33);}

#partenaires h2 { font-weight:400;font-size:22pt;color:rgb(243,124,33);margin:0 auto;}
#partenaires    { width:100%;text-align:center;}
#part img	{ margin-right:20px; width:70px;}
#departement img { margin-right:20px; width:140px;}
#part-center	{position: relative; margin:0 auto;width: 95%}

.footer      { width:1000px;height:40px;line-height:40px;position:relative;margin: auto;padding: 0 12px;background-color: rgb(131,59,150);}
#foot-center { text-align:center;}

/* --- MEDIA QUERIES --- */

@media only screen and (max-width: 600px) {
  .main, .header, {width: 90%;}

}