body {background-color: #c5a430; 
    background-image: url(img/background.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    min-height: 2400px;
    margin: 0;
	overflow-x: hidden;}

#prog {border-bottom: 2px solid yellow;}
#prog2 {border-bottom: 2px solid #2d9479;}

/* ================================================================== F O O T E R ==========================================================*/
footer {
    position: absolute;
    background-color: rgba(52, 27, 31, 0.8);
    top: 3150px;}

/*=================================================================== F I L T R E S ========================================================*/
.filter  {
	display: inline-block;
	margin: 3px 3px 0 0;
	padding: 3px 10px;
	border: 2px solid #341b1f;
	cursor: pointer;
    font-family: sans-serif;
    text-transform: uppercase;
    font-size: 15px;
    color: white;
    z-index: 20;}

#bgscene, #batelier, #bcabane {border: 2px solid #932b45;}
#bcine {border: 2px solid yellow;}
#bexpo {border: 2px solid #2d9479;}
#bconf {border: 2px solid #341b1f;}

#jours {margin-bottom: 15px;}

.filter:hover, #bgscene:hover, #batelier:hover, #bcabane:hover, #bconf:hover, #bcine:hover, #bexpo:hover {
    border: 2px solid white;
    color: #341b1f;}

.place {padding-left: 17px; padding-right: 17px;}

.jour {width: 30px}
.all {width: 100%;}

/*=================================================================== C A S E S - E V E N T ==================================================*/
.blocartist {display: inline-block; cursor: pointer; text-align: center;}

.mix {display: inline-block;
    width: 150px;
    height: 150px;
    margin-top: 2px;
    color: white;
    font-family: sans-serif;
    text-transform: uppercase;
    font-size: 0.8em;
    position: relative;
    background-size: contain;
    background-image: url(img/wait.jpg);
    overflow: hidden;
    margin-left: 2px;
    margin-right: 2px;
    text-align: left;}
.infos {position: relative;
    top: 150px; 
    width: 100%; 
    height: 100%;     
    padding: 10px;
    opacity: 1;
    color: white;}
.music {background-color: rgba(148, 44, 71, 0.6);}
.conference {background-color: rgba(52, 27, 31, 0.6);}
.cinema {background-color: rgba(255, 255, 0, 0.6);}
.exposition {background-color: rgba(45, 148, 121, 0.6);}

.conf {background-image: url(img/conf.jpg);}
.expo {background-image: url(img/expo.jpg);}
.cine {background-image: url(img/cine.jpg);}

#Container .mix{display: none;}

.infodev{text-align: left;
    position: absolute;
    left: 30%;
    top: 40vh;
    width: 40%;
    height: 300px;
    background-color: rgba(148, 44, 71, 1);
    font-family: sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    z-index: 2;
    padding: 10px;
    color: white;
    display: none;
    cursor: default;}

.close {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    text-align: center;
    background-color: white;
    font-size: 20px;
    color: black;}

#contenu {
    width: 100%;
    margin: 0 auto;
    max-width: 944px;
    z-index: 00;
    margin-top: 167px;}

mark {
    background-color: #932b45;
    color: white;
    opacity: 1;}
.conf mark {
    background-color: #341b1f;}
.expo mark {
    background-color: #2d9479;}
.cine mark {background-color: yellow; color: #341b1f;}

#tba {background-image: url(img/tba.jpg); }
#bjm {background: url(img/bjm.jpg); }
#air {background: url(img/air.jpg); }
#bwps {background-image: url(img/bwps.jpg); }
#pmc {background: url(img/pmc.jpg); }
#tgv {background: url(img/tgv.jpg); }
#sm3 {background: url(img/sm3.jpg); }
#mbv {background: url(img/mbv.jpg); }
#ps {background: url(img/ps.jpg); }
#tjamc {background: url(img/tjamc.jpg); }
#kbd {background: url(img/kbd.jpg); }
#mag {background: url(img/mag.jpg); }
#gong {background: url(img/gong.jpg); }
#dbm {background: url(img/dbm.jpg); }
#moo {background: url(img/moo.jpg); }
#cla {background: url(img/cla.jpg); }
#hill {background: url(img/hill.jpg); }
#prod {background: url(img/pro.jpg); }
#diiv {background: url(img/diiv.jpg); }
#wild {background: url(img/wild.jpg); }
#temp {background: url(img/temp.jpg); }
#tame {background: url(img/tame.jpg); }
#tdw {background: url(img/tdw.jpg); }
#not {background: url(img/not.jpg); }
#tcs {background: url(img/tcs.jpg); }
#an01 {background: url(img/an01.jpg); }
#verte {background: url(img/verte.jpg); }
#freepress {background: url(img/freepress.jpg); }
#jeune {background: url(img/jeune.jpg); }
#diggers {background: url(img/diggers.jpg); }
#mai {background: url(img/mai.jpg); }
#poster {background: url(img/poster.jpg); }
#sfs {background: url(img/sfs.jpg); }
#hist {background: url(img/hist.jpg); }
#bigfive {background: url(img/bigfive.jpg); }
#pochette {background: url(img/pochette.jpg); }
#marche {background: url(img/marche.jpg); }
#press {background: url(img/press.jpg); }
#archi {background: url(img/archi.jpg); }
#archiexp {background: url(img/archiexp.jpg); }
#tyse {background: url(img/tyse.jpg); }
#bbmasd {background: url(img/bbmasd.jpg); }
#roer {background: url(img/roer.jpg); }
#dmh {background: url(img/dmh.jpg); }
#woods {background: url(img/woods.jpg); }
#adunes {background: url(img/adunes.jpg); }
#tpt {background: url(img/tpt.jpg); }
#cate {background: url(img/cate.jpg); }
#blta {background: url(img/blta.jpg); }
#cbyh {background: url(img/cbyh.jpg); }
#tyso {background: url(img/tyso.jpg); }
#aspb {background: url(img/aspb.jpg); }
#balla {background: url(img/balla.jpg); }
#pkm {background: url(img/pkm.jpg); }
#apma {background: url(img/apma.jpg); }
#chch {background: url(img/chch.jpg); }
#totu {background: url(img/totu.jpg); }
#ulsp {background: url(img/ulsp.jpg); }
#pshi {background: url(img/pshi.jpg); }
#nibe {background: url(img/nibe.jpg); }
#noma {background: url(img/noma.jpg); }
#jaga {background: url(img/jaga.jpg); }
#alvvays {background: url(img/alvvays.jpg); }
#elwah {background: url(img/elwah.jpg); }
#lemon {background: url(img/lemon.jpg); }
#culte {background: url(img/culte.jpg); }
#teorem {background: url(img/teorem.jpg); }
#ebb {background: url(img/ebb.jpg); }
#groove {background: url(img/groove.jpg); }
#hika {background: url(img/hika.jpg); }
#puppy {background: url(img/puppy.jpg); }
#mouv {background: url(img/mouv.jpg); }
#rider {background: url(img/rider.jpg); }
#more {background: url(img/more.jpg); }
#demain {background: url(img/demain.jpg); }
#merci {background: url(img/merci.jpg); }
#yellow {background: url(img/yellow.jpg); }
#point {background: url(img/point.jpg); }
#meditation {background: url(img/meditation.jpg); }
#soundc {background: url(img/soundc.jpg); }
#lillabox {background: url(img/lillabox.jpg); }
#paak {background: url(img/paak.jpg); }
#siriuzz {background: url(img/siriuzz.jpg); }

#lieux {text-align: center; z-index: 50;}
#jours {text-align: center; z-index: 50;}

/* ========================================================================================== B O X S */
.box {
    position: fixed;
    margin: 0 auto;
    top: 15vh;
    width: 700px;
    max-width: 90vw;
    z-index: 999;
    min-height: 415px;
    background-color: white;
    font-family: "sans-serif";
    font-size: 1em;
    color: #341b1f;
    cursor: default;
    display: none;
    padding: 10px;
    left: 0px;
    right: 0px;
}

.blabla {
    font-family: sans-serif;
    margin-top: 10px;
	margin-left: 20px;}

.close {
    width: 30px;
    height: 30px;
    background-image: url(../img/close.png);
    background-size: contain;
    right: 30px;
    top: 29px;
    position: absolute;}
.close:hover {cursor: pointer; background-image: url(../img/close-hover.png);}

.gallerie {position: absolute;

    width: 30vw;
    height: 30vw;
    max-height: 295px;
    max-width: 295px;
    right: 30px;
    top: 100px;
    text-align: center;
	border: solid 5px #942c47;
	background-size: cover; 
    background-image: url(img/boxwait.jpg);}

h2 {color: #341b1f;
    font-family: "DK black bamboo";
    font-variant-caps: all-petite-caps;
    text-transform: uppercase;
    font-size: 28px;
    border-bottom: 5px solid #942c47;
    margin-bottom: 10px;
    padding-bottom: 10px;
	margin-left: 20px;
	margin-right: 20px;}

h3 {margin-left: 20px;
	font-family: sans-serif;
    font-variant-caps: all-petite-caps;
    text-transform: uppercase;
	color: #2d9479;}

@media only screen and (max-width: 940px) {
    .box {width: 70vw;}
}


@media only screen and (max-width: 810px) {
    footer {top: 3800px;}}

@media only screen and (max-width: 790px) {
    .gallerie {margin: 0 auto;
        left: 0px; right: 0px;
        position: relative; top: 0px; margin-bottom: 10px;}
    h3 {position: relative; }
    .close {top: 10px; margin: 0 auto; left: 0; right: 0;}
}

@media only screen and (max-width: 645px) {
    footer {top: 5000px;}}

@media only screen and (max-width: 628px) {
    #jours {max-width: 350px;
    display: inline-block;}
    #contenu {text-align: center;}
    .box {text-align: left;}
    #container {text-align: left;}
}

@media only screen and (max-width: 550px) {
    #contenu {margin-top: 67px;}
	footer ul {padding: 10px 0px 10px 0px;}
}

@media only screen and (max-width: 482px) {
    footer {top: 7300px;}}

@media only screen and (max-width: 312px) {
    .mix {width: 45vw; height: 45vw; background-size: cover;}}