html, body { height: 100%; background-color: #1188fe; overflow-y: hidden; }

body {
    margin-right: auto;
    margin-left: auto;
    font-family: 'heroregular';
    font-size: 13px;
    padding: 0;
}

body * { color: white; }

a:hover { color: inherit; }

#menu { margin-bottom: 0; }
#menu a {
    border-width: 0;
    color: white;
    padding: 3px 25px;
}

#menu li:nth-child(1) { background-color: #000; }
#menu li:nth-child(2) { background-color: #3c3c3c; }
#menu li:nth-child(3) { background-color: #545252; }
#menu li:nth-child(5) { background-color: #807f7f; }
#menu li:nth-child(4) { background-color: #cbcbcb; }

.nav,
#page-qr #main .question,
h1, h2, h3, h4, h5, h6 { font-family: 'archiveregular'; line-height: 100%; }

h1 { font-size: 23px; }
h2 { font-size: 21px; }
h3 { font-size: 19px; }
h4 { font-size: 17px; }
h5 { font-size: 15px; }
h6 { font-size: 13px; }

/* .btn-primary { background-color: #2f5cd0 !important; color: white !important; }
.btn-primary:focus { background-color: #09164e; !important; color: white !important; }
.btn-primary:hover { background-color: white !important; color: #2f5cd0 !important; } */

.btn-primary { background-color: white !important; color: black !important; }
.btn-primary:focus, .btn-primary:hover { background-color: black !important; color: white !important; }

.legende p { padding: 0 0 3px 0; margin: 0; }

.carousel-indicators li {
    cursor: pointer;
    float: none;
}

#menu li.active a { background-color: #666666; }
#menu li:hover a { background-color: #000000; }

#footer {
    font-size: 11px;
    line-height: 20px;
    background-color: #333333;
    padding: 15px;
    font-family: Arial, Helvetica, sans-serif;
    margin-left: -25px;
    margin-right: -25px;
    /* min-height: 300px; */
}

#footer p { color: #9a9a9a; padding: 5px 25px; }

#footer a { color: inherit; text-decoration: underline; }

#footer #up {
    text-decoration: none;
    text-align: center;
    font-family: 'heroregular';
}

#footer #up span {
    font-size: 54px;
    display: block;
    /* margin-bottom: -10px; */
    margin-top: 5px;
    transform-origin: 50% 50%;
    transform: rotate(90deg);
    -moz-transform-origin: 50% 50%;
    -moz-transform: rotate(90deg);
    -ms-transform-origin: 50% 50%;
    -ms-transform: rotate(90deg);
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: rotate(90deg); /* translateX(100px); */
    font-family: 'hero_lightlight';
}

#main #header { margin-top: 25px; }

#main .content-inner {
    background-color: #1188fe;
    color: white;
    padding: 25px;
    max-width: 600px;
}

#main .content-inner blockquote {
    background: none;
}

#main .content-inner blockquote p {
    font-size: inherit;
}

#main .content-inner p {
    padding: 12.5px 0;
}

.chart_item {
    font-family: 'archiveregular';
}

.chart_pie .chart_item:hover .chart_label {
    color: black;
    background-color: white;
}

.chart_pie .chart_item:hover {
    cursor: pointer;
}

.horiz .chart_item {
    display: inline-block;
}

.chart_item > div {
    transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -webkit-transform-origin: 0% 100%;
}

.chart_label {
    text-align: left;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
}

.horiz .chart_label { text-align: right; }

.chart_bar {
    /* vertical-align: -50%; */
    display: inline-block;
    background-color: #2f5cd0;
    vertical-align: middle; 
}

.chart_count { display: inline-block; vertical-align:middle; }

.carousel { position: absolute; }

.carousel .item {
    background-repeat: no-repeat;
    background-position: top center;
    /* background-size: auto 100%; */
}

.carousel-control {
    position: absolute;
    z-index: 10;
    background: #ff3333;
    border: none;
    font-size: 40px;
    border-radius: 0;
    line-height: 38px;
    width: 25px;
    opacity: 0.8;
    padding: 20px 0;
    left: 0;
}

.carousel-control.right {
    margin-right: -15px;
}


#main {
    padding: 0 25px;
    position: absolute;
    overflow-y: auto;
    overflow-x: hidden;
}

/* #main.non-touchscroll:hover { overflow-y: auto; } */

#main #header {
    margin-bottom: 40px;
}

/* .dragscroll-inner  {
    padding-bottom: 40px;
} */

#main > .content,
#main .row-fluid {
    margin-bottom: 40px;
}

iframe#main { padding: 0; border: none; }

#page-23 #main .nav li {
    font-size: 14px;
    cursor: pointer;
    line-height: 170%;
    /* color: #666666; */
    color: white;
}

#page-23 #main .nav li.active { text-decoration: underline; }

/* #page-23 #main .nav li:before { content: "FRAC "; }

#page-23 #main .nav li span { color: white; } */

#page-23 #main .content-inner:empty { display: none; }

/* #page-23 #main .content-inner h1 img { display: block; margin-top: 25px; } */

#page-qr #main .row-fluid div { min-height: 80px; }

#page-qr #main .row-fluid #q-00 { background-color: #2f5cd0; }
#page-qr #main .row-fluid #q-08 { background-color: #09164e; }
#page-qr #main .row-fluid #q-03 { background-color: #2f5cd0; }
#page-qr #main .row-fluid #q-04 { background-color: #09164e; }
#page-qr #main .row-fluid #q-06 { background-color: #58a8ff; }
#page-qr #main .row-fluid #q-01 { background-color: #2f5cd0; }
#page-qr #main .row-fluid #q-02 { background-color: #2f5cd0; }
/* #page-qr #main .row-fluid #q-07 { background-color: #58a8ff; } */
#page-qr #main .row-fluid #q-05 { background-color: #09164e; }
#page-qr #main .row-fluid #q-07 { background-color: #2f5cd0; }

#page-qr #main .question a { display: block; padding: 10px 15px; font-size: 15px; line-height: 20px; height: inherit; }
#page-qr #main .question:hover { color: #09164e; background-color: white !important; cursor: pointer; }
#page-qr #main .question:hover a { text-decoration: none; color: inherit; }

#main.question { background-color: black; }

/* #main.question #back img { border: 1px solid black; }
#main.question #back:hover img { border: 1px solid white; } */

#main.question #datainfo,
.modal-body #datainfo {
    font-family: 'archiveregular';
    line-height: 200px;
    font-size: 160%;
    display: block;
    text-align: center;
}

#main.question #number { text-align: center; margin-top: 20px; /* margin-bottom: -150px; */ }
#main.question #number strong {
    font-size: 320px;
    line-height: 320px;
    font-family: 'code_lightregular';
    font-weight: lighter;
    color: #fe0066;
}

#main.question iframe {
    /* margin-top: 15px; */
    border: none;
    /* margin: 0 !important;
    margin-right: -25px;
    margin-left: -25px; */
}

#main.question h1 {
    font-size: 24px;
    line-height: 27px;
    margin: 0;
    padding: 10px 0 0 15px;
    /* padding-top: 10px;
    text-align: center; */
}

/* #main.question #back
#main.question .q-nav,
#main.question #header {
    display: inline-block;
    margin: 0;
    margin-top: 20px;
} */

#main.question .q-nav {
    text-align: center;
    font-size: 55px;
    line-height: 75px;
    color: #ccc;
    text-decoration: none !important;
    font-weight: normal;
    font-family: 'hero_lightlight';
    padding: 0 !important;
    margin: 0 !important;
}

#main.question #header {
    margin-top: 14px !important;
    margin-left: 25px !important;
}

#q-header {
    margin-left: -25px;
    margin-bottom: 20px;
}

/*.q-nav:hover { color: #fff; } */

#q-header > *:hover {
    background-color: white;
    color: black !important;
}

#q-header > *:first-child:hover {
    background-color: black;
}

#chart_tl_btn {
    margin-bottom: 20px;
}

#chart_tl_btn > span {
    font-family: 'archiveregular';
    padding: 5px 10px;
    /* margin: 0; */
}

#chart_tl_btn > span:hover, #chart_tl_btn > span.active {
    background-color: white;
    color: black;
    cursor: pointer;
}

/* #main.question h1 a.btn {
    margin-top: 10px;
} */

/* #page-oeuvres #menu li { display: none; } */

/* .carousel { margin-bottom: 0; } */

#page-q-06 #main, #page-q-07 #main, #page-q-08 #main { padding: 0; }
#page-q-06 #q-header, #page-q-07 #q-header, #page-q-08 #q-header { margin-left: auto; margin-bottom: 0; }

#pie {
    background-color: #080808;
    /* width: 700px; */
    height: auto !important;
}

#pie .modal-body {
    min-height: 400px !important;
    text-align: center;
    overflow: hidden;
}

#pie .close {
    color: white;
    opacity: 0.8;
    font-size: 300%;
}

#pie .total,
#pie .units,
#pie .label,
#pie .value {
    fill: white;
    font-family: 'archiveregular';
}

#by-frac ul { margin-top: 70px; margin-left: 0; }

#by-frac ul li {
    font-family: 'archiveregular';
    list-style: none;
    padding-left: 4px;
}

#by-frac ul li:hover {
    cursor: pointer;
    background-color: white;
    color: black;
}

@media (min-width: 768px) {
    #main #header {
        margin-bottom: 100px;
    }
    .carousel-control {
        margin-top: 20px;
    }
    .carousel .legende {
        position: absolute;
        margin-left: 95%;
        transform-origin: 0% 100%;
        transform: rotate(270deg);
        -moz-transform-origin: 0% 100%;
        -moz-transform: rotate(270deg);
        -ms-transform-origin: 0% 100%;
        -ms-transform: rotate(270deg);
        -webkit-transform-origin: 0% 100%;
        -webkit-transform: rotate(270deg); /* translateX(100px); */
        width: 250px;
        font-size: 85%;
    }
    #page-qr #main .row-fluid #q-03 { height: 160px; }
    #page-qr #main .row-fluid #X-03 { height: 160px;  margin-top: -80px; }
    #page-qr #main .row-fluid #q-06 { height: 160px; margin-top: 10px; margin-bottom: 10px; }
    #page-qr #main .row-fluid #block-2 { margin-top: 80px; }
    #page-qr #main .row-fluid #block-2 > div { margin-top: 10px; }

    #q-header {
        /* position: absolute !important;
        left: 0; */
        border: 1px solid white;
        border-width: 0 0 1px 0;
    }

    #q-header > * {
        border: 1px solid white;
        border-width: 0 1px 0 0;
        height: 75px;
    }

    #page-q-08 #question { padding-top: 5px }


    #page-q-04 #chart_tl_btn {
        margin-bottom: -50px;
    }

    .modal {
        width: 90% !important;
        margin-left: -45% !important;
    }

     /* #page-q-04 #q-header { margin-bottom: -20px; } */

    /* #main.question > div.row-fluid > div:nth-child(2) { margin-top: 95px; } */

    /* .q-nav:last-of-type { text-align: left; } */
}

@media (max-width: 1080px) {
    #main.question #header {
        width: 250px;
    }

    #main.question h1 {
        font-size: 21px;
        line-height: 24px;
    }
}

@media (max-width: 900px) {
    #main.question #header {
        width: 180px;
    }

    #main.question h1 {
        font-size: 18px;
        line-height: 21px;
    }
}

@media (max-width: 767px) {
    .carousel .legende {
        display: none;
/*        position: absolute;
        margin-left: 25px;
        bottom: 15px; */
    }
    #page-qr #main .row-fluid #q-00 { display: none; }
    #page-qr #main .row:empty { display: none; }

    #q-header > * {
        border: 1px solid white;
        border-width: 0 0 1px 0;
        height: 75px;
    }

    #main.question #header {
        width: auto;
    }

    #page-q-04 #chart_tl_btn {
        margin-top: 20px;
        margin-bottom: -20px;
    }

    /* #pie svg { zoom: 0.8; }*/
}

/* Time Line adjustments (PF-145)*/
 #storyjs-timeline .vco-storyjs, #storyjs-timeline .credit, #storyjs-timeline div.timeline-axis-text, #storyjs-timeline .text h2 , #storyjs-timeline .text h3{
font-family: 'archiveregular' !important;
}

#storyjs-timeline .credit {
  margin-top: 10px;
  font-size: 12px;
  line-height: 18px;
}
#storyjs-timeline .content-container {
  cursor: pointer;
}


/* @media (max-width: 767px) and (max-width: 400px) { #pie .modal-body { max-height: 500px !important; } #pie svg { zoom: 0.8; } }
@media (min-width: 1281px) or (min-height: 800px) { #pie .modal-body { background-color: pink; max-height: 900px !important; } #pie svg { zoom: 1.5; } } */

@media (min-width: 1281px) { #pie .modal-body { max-height: 800px !important; } #pie svg { zoom: 1.3; } }
@media (max-width: 1280px) { #pie .modal-body { max-height: 700px !important; } #pie svg { zoom: 1.15; } }
@media (max-width: 1024px) { #pie .modal-body { max-height: 500px !important; } #pie svg { zoom: 1; } }
@media (max-width: 900px) { #pie .modal-body { max-height: 400px !important; } #pie svg { zoom: 0.9; } }
@media (max-width: 767px) { #pie .modal-body { max-height: 350px !important; } #pie svg { zoom: 0.7; } }
@media (max-width: 600px) { #pie .modal-body { max-height: 300px !important; } #pie svg { zoom: 0.5; } }


#lang{
   position: absolute;
   color: white;
   font-size: 13px;
   font-family: 'archiveregular';
   /* background-color: white;*/
   padding: 0px 0px 4px 0px;
   right: 0px;
}
#lang a{
   margin-right: 20px;
   margin-left: 20px;
}