#credits{
  position: absolute;
  top:0px;
  right:0px;

  width:900px;
  height:100%;

  background-color: #222;

  z-index:35;
  display: none;

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  font-family: "titilliumregular";
  color:#fff;
  padding-left:40px;
  line-height: 20px;
}

#credits-top-margin{
  padding-top: 40px;
}
#credits-bottom-margin{
  padding-bottom: 40px;
}

#credits-title{
  font-size:2em;
  font-family: "titilliumlight";
  font-style: italic;
  padding-bottom:40px;
}

.credits-cat{
  font-family: "titilliumitalic";
  padding:30px 0px;
}
.credits-cat-spe{
  font-family: "titilliumlight";
  padding:30px 0px;
}

.credits-person{
  font-size:1em;
  font-family: "titilliumlight";
}

#credits-copyright{
  padding-top:40px;
}

#credits b{
  font-family: "titillium_bdbold";
}

#debug{
  position:fixed;
  top:0px;
  left:0px;
  background-color:#ddd;
  font-size:1em;
  z-index:10000;
  opacity: 0.95;
}

#info{
  position:absolute;
  left:0px;
  top:0px;
  background-color:#000;
  color:#d11;
  width:300px;
  height:50px;
}

#grid{
  position:absolute;
  left:0px;
  top:0px;
}

.gridCell{
  float:left;
  display:block;
  border-style:solid;
  border-width:1px;
  border-color:#eee;
}

.debug-frame{
  position:absolute;
  left:50%;
  top:50%;
  background: rgba(200, 20, 20, 0.5);
}

.white{ color :#fff; }
.red{ color : #e64d50; }
.green{ color : #7ec269; }
.grey{ color:#a2a2a2; }
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 4, 2016 */



@font-face {
    font-family: 'playfair_displaybold_italic';
    src: url('playfairdisplay-bolditalic-webfont.eot');
    src: url('playfairdisplay-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('playfairdisplay-bolditalic-webfont.woff2') format('woff2'),
         url('playfairdisplay-bolditalic-webfont.woff') format('woff'),
         url('playfairdisplay-bolditalic-webfont.ttf') format('truetype'),
         url('playfairdisplay-bolditalic-webfont.svg#playfair_displaybold_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'titilliumblack';
    src: url('titillium-black-webfont.eot');
    src: url('titillium-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('titillium-black-webfont.woff2') format('woff2'),
         url('titillium-black-webfont.woff') format('woff'),
         url('titillium-black-webfont.ttf') format('truetype'),
         url('titillium-black-webfont.svg#titilliumblack') format('svg');
    font-weight: normal;
    font-style: normal;
}




@font-face {
    font-family: 'titillium_bdbold';
    src: url('titillium-bold-webfont.eot');
    src: url('titillium-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('titillium-bold-webfont.woff2') format('woff2'),
         url('titillium-bold-webfont.woff') format('woff'),
         url('titillium-bold-webfont.ttf') format('truetype'),
         url('titillium-bold-webfont.svg#titillium_bdbold') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'titilliumlight';
    src: url('titillium-light-webfont.eot');
    src: url('titillium-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('titillium-light-webfont.woff2') format('woff2'),
         url('titillium-light-webfont.woff') format('woff'),
         url('titillium-light-webfont.ttf') format('truetype'),
         url('titillium-light-webfont.svg#titilliumlight') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'titilliumregular';
    src: url('titillium-regular-webfont.eot');
    src: url('titillium-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('titillium-regular-webfont.woff2') format('woff2'),
         url('titillium-regular-webfont.woff') format('woff'),
         url('titillium-regular-webfont.ttf') format('truetype'),
         url('titillium-regular-webfont.svg#titilliumregular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'titilliumitalic';
    src: url('titillium-regularitalic-webfont.eot');
    src: url('titillium-regularitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('titillium-regularitalic-webfont.woff2') format('woff2'),
         url('titillium-regularitalic-webfont.woff') format('woff'),
         url('titillium-regularitalic-webfont.ttf') format('truetype'),
         url('titillium-regularitalic-webfont.svg#titilliumitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}
#home{
  position:fixed;
  width:100%;
  height:100%;
  font-size:3em;

  background-color: #7dd2f7;
  background-image:url("../design/home.png");
  background-repeat: no-repeat;
  background-position: top right;

  z-index:20;
}

#home a{
  display: inline-block;
}

#home-title{
  color:#444;
  position:absolute;
  left:50%;
  top:50%;
  width:800px;
  height:600px;
  margin-left:-400px;
  margin-top:-300px;
  text-align: center;
}

.home-whitebg{
  margin:auto;
  margin-bottom:10px;
}

#home-title-top{
  font-size:1em;
  font-family: "titillium_bdbold";
  line-height: 1.2em;
  background-color: #fff;
}

#home-title-decouvre, #home-title-illustre{
  font-size:0.9em;
  font-family: "titilliumregular";
  line-height: 1.2em;
  background-color: #fff;
  margin:10px 0px;
}
#home-title-decouvre{
  margin-left:130px;
  margin-right:130px;
}
#home-title-illustre{
  margin-left:150px;
  margin-right:150px;
}

#home-subtitle{
  font-size:0.75em;
  font-family: "titilliumitalic";
  margin-top:20px;
}

#home-subtitle a{
  color:#444;
  text-decoration: underline;
}

#home-logo-top{
  margin-bottom:40px;
  width:90px;
  height:90px;
  background-size: 100% 100%;
  background-image:url("../design/palais-2024--noir.svg");
}

#home-logo-bottom{
  margin-top:40px;
  width:170px;
  height:96px;
  background-size: 100% 100%;
  background-image:url("../design/logo-ans.png");
}

html,body{
  background-color:#eee;
  font-size:16px;
  position:absolute;

  width:100%;
  height:100%;

  overflow:hidden;
}

a{ text-decoration: none; color:#000; border-style: none; }
a:focus{ text-decoration: none; color:#000; border-style: none; }

.clear{ clear:both; }
.left{ float:left;}

#canvas{
  position:fixed;
  top:50%;
  left:50%;

  width:1000px;
  height:750px;
  margin-left:-500px;
  margin-top:-375px;

  /*
  border-style: solid;
  border-width: 1px;
  */

  z-index:1;
}

.layer{
  position:absolute;
  top:50%;
  height:100%;
  width:100%;
}

.story{
  position:absolute;
  width:100%;
  height:100%;
  display: block;
}

#story img{
  display:none;
}

.BitmapObject{
  position:absolute;
  z-index: 100;
  display:block;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% 100%;

  -webkit-transform:translateZ(0);
}

.BitmapObject img{
  width:100%;
  height:100%;

  -webkit-transform:translateZ(0);
}


.contrast{
  color:#fff;
}

.aria{}

.noscroll{

}




#loading{
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color: #222;
  opacity:0.95;
  display: none;
  z-index:15;
}

#loading-symbol{
  background-image:url("../design/loading.gif");
  background-size:100% 100%;
  width:128px;
  height:15px;
  position:fixed;
  top:50%;
  left:50%;
  margin-left:-64px;
  margin-top:-7px;
}






#rotation{
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color: #3e4a4c;
  display: none;
  z-index:50;
}

#rotation-info{
  background-image: url("../design/rotation.gif");
  background-size: 100% 100%;
  width: 200px;
  height: 200px;

  position:absolute;
  left:50%;
  top:50%;

  margin-top:-100px;
  margin-left:-100px;
}



#old{
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color: #3e4a4c;
  display: none;
  z-index:50;
}

#old-info{
  font-family: "titilliumregular";
  color:#fff;
  font-size:2em;

  width:400px;
  height:400px;

  position:absolute;
  left:50%;
  top:50%;

  margin-top:-200px;
  margin-left:-200px;
}

.aria-evitement{
  z-index:1000;
  top:10px;
  left:10px;
  position:absolute;
  font-size:0.8em;
  background-color: #fef;
  opacity:0;
  filter: alpha(opacity=0);
}
.aria-evitement:focus{
  opacity:1;
  filter: alpha(opacity=100);
}

.aria-hidden{
  opacity: 0;
  filter: alpha(opacity=0);
}

.no-css{
  display:none;
}
/* ipad */
@media (max-width : 768px) {

  #ui-date{
    width:120px;
    height:120px;
  }

  #ui-date-label{
    font-size:2em;
  }
  #ui-date-choix{
    font-size:0.5em;
  }

  #page-scroll{
    overflow: hidden;
  }
}

#page{
  z-index:10;
  background-color: #fff;
}

#page i{
  font-family: "titilliumitalic";
}

.page-slide{
  position: absolute;
  top:0px;
  right:0px;

  width:500px;
  height:100%;

  font-family: "titilliumregular";

  display: none;
}

#page-date{
  padding:25px;
  font-size:3.1em;
  font-family: "titillium_bdbold";
  z-index:100;
  width:100%;
}

#page-title{
  font-size:2.5em;
  font-family: "titillium_bdbold";
  margin-top:20px;
  margin-bottom:40px;
}

#page-photo{

}

#page-scroll{
  position:relative;
  height: 100%;
  overflow:hidden;
  overflow-y:scroll;
}



#page-scroll-fix{
  height: calc(100% + 1px);
  background-color: #fff;
}

#page-mid{
  padding:0px 30px;
  font-family: "titilliumregular";
  background-color: #fff;
}

.page-paragraphe-title{
  font-size:1.5em;
  font-family: "titillium_bdbold";
  padding-bottom:15px;
}
.page-paragraphe-description{
  font-size:1em;
  line-height: 25px;
  font-style: justify;
  padding-bottom:40px;

}
.page-paragraphe-photos{
  padding-bottom:40px;
}

.page-paragraphe-photo{

  text-align: center;
  margin-bottom:30px;
}
.page-paragraphe-photo img{
}

.page-paragraphe-photo-legende{
  font-style: italic;
  font-family: "titilliumregular";
  font-size:1em;
  margin-top:3px;
}




#page-paragraphe-insolite{
  padding:0px 20px;
  color:#000;
}
#page-paragraphe-insolite-title{
  color:#000;
  font-size:2.5em;
  font-family: "titillium_bdbold";
  line-height: 1.5em;
  margin-bottom:20px;
}

#page-paragraphe-insolite-photo{
  text-align: center;
}
#page-paragraphe-insolite-photo img{
  margin:auto;
}
#page-paragraphe-insolite-description{
  margin-top:20px;
  font-size:1em;
  line-height: 25px;
  font-style: justify;
  padding-bottom:40px;
}




#page-button-ext{
  background-image:url("../design/bouton-cite.png");
  background-size: 100% 100%;
  width:453px;
  height:100px;
  display: block;
  margin: auto;
  text-align: center;
  padding-top:30px;
  padding-left:20px;
  margin-bottom:30px;
}
#page-button-ext-text{
  float:left;
  width:265px;
  font-size:1.05em;
  padding-top:20px;
}
#page-button-ext-logo{
  background-image:url("../design/logo-ans_csi.png");
  background-size: 100% 100%;
  width:120px;
  height:70px;
  margin-left:10px;
  float:left;
}



#page-footer{
  background-color: #c0bfbe;
  height:200px;
}

#page-footer-credits{
  text-transform: uppercase;
  line-height: 100px;
  margin-left:40px;
  font-size:0.8em;
  width:200px;
  float:left;
}
#page-footer-credits:hover{
  color:#eee;
}
#page-footer-logos{
  float:left;
  padding-left:100px;
  width:400px;
}
.page-footer-logo{
  width:75px;
  height:75px;
  background-size: 100% 100%;
  margin-top:10px;
  margin-left:50px;
  float:left;
}
#page-footer-logo-csi{
  background-image: url('../design/palais-2024--noir.svg');
}
#page-footer-logo-ans{
  background-image: url('../design/logo-ans.png');
  width:125px;
}


#page-pretitle{
  margin-top:30px;
}
#page-pretitle-content{
  padding-bottom: 10px;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

#noScroll{
  z-index:1000;
  position:absolute;
  top:0px;
  width:100%;
  height:100%;
  overflow:hidden;
}

#big{
  position:fixed;
  top:0px;
  width:100%;
  height:100%;
  display: block;

  background:url("../design/transparent.png") repeat;
}


#ui{
  position:relative;
  width:100%;
  height:100%;
  /*background-color: #d33;*/
}

.ui-element{}

#ui-close{
  background-size:100% 100%;
  width:30px;
  height:30px;
  position:fixed;
  top:35px;
  right:40px;
  z-index:40;
  display:none;
}

#ui-title{
  position:fixed;
  z-index:5;
  top:0px;
  left:0px;

  width:400px;
  height:170px;
  font-family: "titilliumregular";
  letter-spacing: 2px;
  font-size:2em;
}

#ui-title-border{
  position:relative;
  float:left;
  width:3%;
  height:100%;
  background-color: #000;
}

#ui-title-text{
  position:relative;
  float:left;
  width:90%;
  padding-left:3%;
  padding-top:76px;
}
#ui-title-text-ans{
  font-family: "titilliumregular";
}

#ui-title-text-cite{
  font-family: "titilliumblack";
  text-transform: uppercase;
}




#ui-menu{
  position:fixed;
  bottom:0px;
  font-family: "titilliumregular";
  text-transform: uppercase;
  font-size:0.9em;
  padding-left:25px;
  letter-spacing: 1px;
  z-index:30;
}

.ui-menu-button{
  padding:25px;
  float:left;
}

.ui-menu-button:hover{
  color:#efe;
}

#ui-menu-cite{
  font-family: "titillium_bdbold";
}

#ui-scroll{
  position:fixed;
  background:url("../design/ui-scroll.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% 100%;
  width:50px;
  height:100px;
  bottom:0px;
  left:50%;
  margin-left:-25px;
  margin-bottom:50px;
  pointer-events: none;
  z-index: 5;
}

#ui-social{
  position:fixed;
  top:0px;
  right:0px;

}

.ui-social-button{
  position:absolute;

  display: block;
  width:40px;
  height:40px;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% 100%;

  z-index:40;
}
#ui-social-facebook{
  background-image: url("../design/ui-facebook.png");
  top:20px;
  right:20px;
}
#ui-social-twitter{
  background-image: url("../design/ui-twitter.png");
  top:80px;
  right:20px;
}

#ui-voir{
  background-color:#262626;
  width:90px;
  height:90px;
  padding:10px;

  position:fixed;
  right:0;
  top:50%;

  margin-top:-45px;

  line-height: 90px;

  font-size:1.25em;
  letter-spacing: 2px;

  color:#fff;
  text-align: right;

  font-family: "titilliumregular";
  text-transform: uppercase;

  display: none;
  z-index:5;
}

#ui-voir:hover{
  color:#78F9AC;
}







#ui-date{
  position:fixed;
  top:150%;
  margin-top:65px;
  right:110px;
  background-color: #d348c6;
  width:222px;
  height:222px;
  font-family: "titillium_bdbold";
  text-align: center;
  display: none;
  z-index:5;
}

#ui-date-label{
  position:relative;
  top:30%;
  font-size:2.5em;
}

#ui-date-choix{
  position: absolute;
  bottom:15%;
  left:20%;
  width:60%;
  text-align: center;
  font-size:1em;
  padding-top:5%;
  border-top-style:solid;
  border-top-width:1px;
  text-transform: uppercase;
}





#ui-date-selector{
  position:fixed;
  right:110px;
  top:0px;
  width:275px;
  height:100%;
  background:#000;
  overflow-y: auto;
  z-index:10;
}

#ui-date-selector-vertical{
  margin-top:50px;
}

.ui-date-selector-line{
  position:relative;
  display: block;
  margin-top:5px;
}

.ui-date-selector-line-label{
  height:30px;
  line-height: 30px;
  color:#fff;
  font-family: "titilliumregular";
  font-size:1.8em;
  letter-spacing: 3px;
  text-align: right;
  padding-right:10px;
}


.ui-date-selector-line:focus .ui-date-selector-line-label{
  font-size:2.2em;
  font-family: "titillium_bdbold";
}

.ui-date-selector-line:hover .ui-date-selector-line-label{
  font-size:2.2em;
  font-family: "titillium_bdbold";
}


.ui-date-selector-line:focus .ui-date-selector-line-line{
  background-color: #fff;
  border-top-style: solid;
  border-top-width: 1px;
  margin-top:14px;
}

.ui-date-selector-line:hover .ui-date-selector-line-line{
  background-color: #fff;
  border-top-style: solid;
  border-top-width: 1px;
  margin-top:14px;
}