/* Feuille de style personnaliée pour Webdoc sur la Coopération décentralisée France-Sénégal */
/* Version : 1.0 */
/* Auteurs : Géraldine Woerner / Florent Romano */
/** Mise en forme menu */

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

}

/* Center the loader */
#loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    background-image: url('../img/rouage-centre.png');
    width: 120px;
    height: 120px;
    -webkit-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite;
}
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#leContenu {
    display: none;
}

#webdocContenu {  /* spécifique pour la page webdoc niveau 2  */
    display: none;  
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
}

body {
    /*    display: flex;
        justify-content: center;
        align-items: center;*/
    width: 100%;
    height: 100vh;
}

.wrapper {
    position: absolute;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 1px;
    height: 100vh;
}

.el {
    position: absolute;
    opacity: 1;
    width: 30px;
    height: 24vh;
    margin-top: -12vh;
    transform-origin: 50% 100%;
    background: white;
}
p, a, ul, li, h1, h2, h3, h4, h5 {
    font-family: 'Roboto', sans-serif;
    color: #0f5c63;
}

p, a, ul, li {
    font-size:14px;
}

a{
    color: #bd4b34;
    font-size: 2rem;
}
/*page*/
.container-fluid, [class|="col"] {
    padding-left: 0px;
    padding-right: 0px;
}

.row {
    margin-left: 0px;
    margin-right: 0px;
}

a:hover {
    text-decoration: none;
}

iframe {
    border:none;
}

/* =====================================
MENU
===================================== */

header {
    position: fixed;
    width: 100%;
    z-index: 1;
    top: 0;
}

#menu, #sous-menu {
    cursor: pointer;
}

h2#menu {
    min-height: 50px;
    width: 100%;
    font-size: 18px;
    color: #ffffff;
    font-weight: bold;
    position: relative;
    top:6px;
    z-index: 2;
}

#sous-menu {
    display: none;
    position: fixed;
    width: 100%;
    top:0px;
}

#triangle {
    display: inline-block;
    position: relative;
    height: 0;
    width: 100%;
    border-top:80px solid #bd4b34;
    border-right:50vw solid transparent;
    border-left:50vw solid transparent;
    z-index: 0;
}

#rouage-menu {
    z-index: 0;
    position: fixed;
    top:0px;
    left:50%;
    margin-left:-56px;
}

ul#entrees-menu {
    position: fixed;
    display: none;
    width: 100%;
    top:20px;
}

#entrees-menu li {
    display: inline;
    text-align: center;
    font-weight: bold;
}
#entrees-menu li a {
    font-size: 1.1rem;
}
#entrees-menu li a.menu-actif {
    color:#0f5c63;
}
#entrees-menu li a.inactive {
    color:#ffffff;
}

#entrees-menu li a::after {
    content:"|";
    padding-left: 10px;
    padding-right: 5px;
    color:#ffffff;
}

#entrees-menu li:last-child a::after {
    content:'';
}

/* Menu fixe pour page "sujet" et "acteurs" */
#acteurs #sous-menu, #sujet #sous-menu {
    display: block;
    position: fixed;
    width: 100%;
    top: 0px;
}
#acteurs #triangle, #sujet #triangle {
    display: inline-block;
    position: relative;
    height: 0;
    width: 100%;
    border-top: 80px solid #bd4b34;
    border-right: 50vw solid transparent;
    border-left: 50vw solid transparent;
    z-index: 0;
}

#acteurs #rouage-menu, #sujet #rouage-menu {
    z-index: 0;
    position: fixed;
    top: 60px;
    left: 50%;
    margin-left: -56px;
}

#acteurs ul#entrees-menu, #sujet ul#entrees-menu {
    position: fixed;
    display: block;
    width: 100%;
    top: 20px;
}
#acteurs #sous-menu, #sujet #sous-menu {
    cursor: inherit;
}
/* Fin menu fixe */

/* =====================================
PAGE CONTENT Niveau 2
===================================== */
#niveau2 {
    background:url('../img/palabre-niveau2.jpg') #dcd9cf no-repeat;
    background-size: cover;
    position: relative;
}

#niveau2 #logo {position: fixed;}

#pt-rouage-niv2 {
    -webkit-animation-name: pt-rouage-niv2;
    -webkit-animation-duration: 5s;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-name: pt-rouage;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes pt-rouage-niv2 {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
/* Standard syntax */
@keyframes pt-rouage-niv2 {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

#gd-rouage-niv2 {
    position: relative;
    left: -5px;
    transform: rotate(15deg);
    -webkit-animation-name: gd-rouage-niv2;
    -webkit-animation-duration: 5s;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-name: gd-rouage;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes gd-rouage-niv2 {
    from {transform: rotate(375deg);}
    to {transform: rotate(15deg);}
}
/* Standard syntax */
@keyframes gd-rouage-niv2 {
    from {transform: rotate(375deg);}
    to {transform: rotate(15deg);}
}

/*Texte des entrées vers le niveau 3*/

.entree-niveau3 {
    position: absolute;
    display: none;
}
.entree-niveau3.active {
    display: inline;
}
#niveau2 .entree-niveau3 a {
    font-size: 18px;
    color: #fff;
}

@media screen and (max-aspect-ratio:8/5) {
    #titre-1 {
        transform: rotate(-18deg) translate(280px);
    }
    #titre-2 {
        transform: rotate(18deg) translate(250px);
    }
    #titre-3 {
        transform: rotate(60deg) translate(200px);
    }
    #titre-4 {
        transform: rotate(-60deg) translate(-180px);
    }
    #titre-5 {
        transform: rotate(-18deg) translate(-210px);
    }
    #titre-6 {
        transform: rotate(18deg) translate(-250px);
    }
    #titre-7 {
        transform: rotate(60deg) translate(-200px);
    }
}

@media screen and (min-aspect-ratio:81/50) {
    #titre-1 {
        transform: rotate(-14deg) translate(280px);
    }
    #titre-2 {
        transform: rotate(14deg) translate(250px);
    }
    #titre-3 {
        transform: rotate(60deg) translate(200px);
    }
    #titre-4 {
        transform: rotate(-60deg) translate(-180px);
    }
    #titre-5 {
        transform: rotate(-14deg) translate(-210px);
    }
    #titre-6 {
        transform: rotate(14deg) translate(-250px);
    }
    #titre-7 {
        transform: rotate(60deg) translate(-200px);
    }
}

/*svg 8 triangles*/

.svg-content {
    width:100vw;
    height: 100vh;
}

/*@media only screen and (orientation: landscape) {
    .svg-content {
    min-width:100vw;
    height: 100vh;
    }
}
@media only screen and (orientation: portrait) {
    .svg-content {
    width:100vw;
    min-height: 100vh;
    }
}*/

.rayon-svg {
    fill:rgba(0,0,0,0);
}

#niveau2 polygon {
    transition: fill 500ms;
}
#rayon-1 polygon:hover, #rayon-1.active polygon {
    fill:rgba(189,75,52,0.8);
}
#rayon-2 polygon:hover, #rayon-2.active polygon {
    fill:rgba(211,99,46,0.8);
}
#rayon-3 polygon:hover, #rayon-3.active polygon {
    fill:rgba(201,117,43,0.8);
}
#rayon-4 polygon:hover, #rayon-4.active polygon {
    fill:rgba(201,145,97,0.8);
}
#rayon-5 polygon:hover, #rayon-5.active polygon {
    fill:rgba(113,44,30,0.8);
}
#rayon-6 polygon:hover, #rayon-6.active polygon {
    fill:rgba(190,52,24,0.8);
}
#rayon-7 polygon:hover, #rayon-7.active polygon {
    fill:rgba(223,192,161,0.8);
}

/*Media query spécifique pour IE*/
@media all and (-ms-high-contrast:none)
{
    body {
        display: block;
    }
    #niveau2 #logo {
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50px, -40px);
    }
    .entree-niveau3 {
        top:45vh;
        left:45vw;
    } /* IE10 */
    *::-ms-backdrop, .entree-niveau3 {
        top:47vh;
        left:45vw;
    } /* IE11 */
    #titre-6 {
        transform: rotate(18deg) translate(-250px, 30px);
    }
}


/* =====================================
Page NIVEAU 1
===================================== */

body#niveau1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-image: url("../img/capture-video-troupeau.jpg");
    background-size: cover;
    background-position:bottom center; 
}

/* Video arrière-plan plein écran */
.vimeo-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.vimeo-wrapper iframe {
    width: 100vw;
    height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
    min-height: 100vh;
    min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Logo animé */
#niveau1 #logo {
    position: fixed;
    top: 0;
    left: 10px;
}

#niveau1 .logo {
    float: left;
}

#pt-rouage {
    position: relative;
    top: 28px;
    left: 5px;
    -webkit-animation-name: pt-rouage;
    -webkit-animation-duration: 5s;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-name: pt-rouage;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes pt-rouage {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
/* Standard syntax */
@keyframes pt-rouage {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

#gd-rouage {
    position: relative;
    top: 16px;
    left: -5px;
    transform: rotate(15deg);
    -webkit-animation-name: gd-rouage;
    -webkit-animation-duration: 5s;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-name: gd-rouage;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes gd-rouage {
    from {transform: rotate(375deg);}
    to {transform: rotate(15deg);}
}
/* Standard syntax */
@keyframes gd-rouage {
    from {transform: rotate(375deg);}
    to {transform: rotate(15deg);}
}

/* Texte déroulant */
#niveau1 .container {
    position: relative;
    max-width: 600px;
    padding: 50px 50px 75px 50px;
    background-color: rgba(255,255,255,0.7);
}

#niveau1 .parent-defile {
    max-width: 600px;
    max-height: 600px;
    overflow: hidden;
    margin:auto;
}

#niveau1 .defile {
    position: relative;
    top: 100%;
}

#niveau1 #entrer {
    display: none;
    position: absolute;
    right: 50px;
    bottom: 10px;
}

#niveau1 #up {
    position: absolute;
    top: 0;
    right: 5px;
}
#niveau1 #down {
    position: absolute;
    bottom: 60px;
    right: 5px;
}

/*Tooltip son*/
.tip-son {
    display: none;
    width: 150px;
    position: absolute;
    right: 0;
    top: -65px;
    font-size: 14px;
    color:#0f5c63;
    background-color: #ffffff;
    padding: 5px;
    text-align: center;
}
.tip-son::before {
    content: url(../img/tooltip.png);
    position: absolute;
    bottom: -12px;
    left: 93px;
}

/* =====================================
Page LES ACTEURS
===================================== */

#acteurs {
    display: block;
    background: url("../img/ForageToubelBali.jpg") no-repeat bottom center;
    background-size: cover;
    height: auto;
    /*min-height: 100vh;*/
}

#acteurs div.container-fluid {
    position: relative;
}

#acteurs .row {
    margin: 0 20px 150px 20px;
    padding-top: 120px;
}

#acteurs .col-sm-6 {
    padding: 0 50px;
}

#acteurs .col-droite {
    padding-left: 100px;
}

#acteurs ul li {
    line-height: 1.5em;
}

#acteurs .container-fluid a, #credits a {
    font-size: 1em;
    color: #0f5c63;
    text-decoration: underline dotted;
}
#acteurs .container-fluid a:hover, #acteurs .container-fluid a:active, #credits a:hover, #credits a:active {
    color: #bd4b34;
}

/*#acteurs a#retour {
    position: relative;
    left:20px;
    bottom: 20px;
}*/

/* =====================================
Page LE SUJET
===================================== */
#sujet {
    display: block;
    height: initial;
    min-height: 100vh;
}

#sujet div.container-fluid {
    position: relative;
}

#sujet .row {
    margin: 30px 20px 0;
    padding-top: 150px;
}

#sujet .col-sm-3 {
    padding-right: 20px;
}

#sujet h2 {
    font-size: 1.3rem;
    font-weight: bold;
    text-align: right;
}

#sujet iframe {
    float: right;
    width: 95%;
    min-height: 270px;
}

/*#sujet a#retour {
    position: relative;
    left:20px;
    margin-bottom: 10px;
}*/


/*======================================
Pages NIVEAU 3
======================================*/
body#niveau3-svg {
    display: block;
    background-color: #dcd9cf;
    background-size: cover;
    background-repeat: no-repeat;
    /*justify-content: right;*/
}

#niveau3-svg h1 {
    font-size: 1.4rem;
    color: #bd4b34 !important;
    text-align: center;
    position: relative;
    top: 75px;
}


/* bloc des portraits */
#bloc-svg{
    width:41vw;
    /*  height: 50vh;*/
    position: absolute;
    left: 50vw;
    top: 12%;
    margin-left: 70px;
}
svg.niveau3-svg-content{
    width: 100%;
    height: 100%;
}
svg#cooperer {
    background: url("../img/portraits-coopererQuestceQuonRetient.png") no-repeat;
    background-size: contain ;
    background-position: center;
}
svg#changement {
    background: url("../img/portraits-quelsChangements.png") no-repeat;
    background-size: contain ;
    background-position: center;
}
svg#aQuoiCaSert {
    background: url("../img/portraits-aQuoiCaSert.png") no-repeat;
    background-size: contain ;
    background-position: center;
}
svg#ceQuiNousAnime {
    background: url("../img/portraits-ceQuiNousAnime.png") no-repeat;
    background-size: contain ;
    background-position: center;
}
svg#decider {
    background: url("../img/portraits-quandIlFautDecider.png") no-repeat;
    background-size: contain ;
    background-position: center;
    max-width: 550px;
}
svg#difference{
    background: url("../img/portraits-parlerDeLaMemeChose.png") no-repeat;
    background-size: contain ;
    background-position: center;
    max-width: 600px;
}
svg#encore{
    background: url("../img/portraits-maisEncore.png") no-repeat;
    background-size: contain ;
    background-position: center;
}
/* bloc des ambiances  */
#niveau3-svg .svg-ambiance {
    position: fixed;
    bottom: 0;
    left:0;
}
#niveau3-svg .svg-content-ambiance {
    width:50vw;
    height: 50vh;
}
.rayon-svg-ambiance {
    fill:rgba(0,0,0,0);
}

img#fond-ambiances {
    position: fixed;
    width: 50vw;
    height: 50vh;
    bottom: 0;
    left: 0;
    z-index: -1;
}

#rouage-centre {
    position: absolute;
    top:50%;
    left:50%;
    z-index: 10;
    transform: translate(-5vw,-5vw) rotate(25deg);
}
#rouage-centre img {
    max-width:120px;
    width: 10vw;
}
@media (min-width:1200px) {
    #rouage-centre{
        transform: translate(-60px,-60px) rotate(25deg);
    }
}

/* Rotation du rouage central */

#rouage-centre img.rotation {
    /* position: relative;
    top: 16px;
    left: -5px; */
    /* transform: rotate(15deg); */
    -webkit-animation-name: rouage-centre;
    -webkit-animation-duration: 5s;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-name: rouage-centre;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes rouage-centre {
    from {transform: rotate(375deg);}
    to {transform: rotate(15deg);}
}
/* Standard syntax */
@keyframes rouage-centre {
    from {transform: rotate(375deg);}
    to {transform: rotate(15deg);}
}

/* affichage du titre au hover */
#hover-video {
    position: absolute;
    left:52%;
    top:80%;
}
#niveau3-svg .hover-titre::before {
    content:url('../img/icone-rouage.png');
    position: relative;
    top:40px;
    padding-right: 5px;
}
#niveau3-svg .hover-titre-ambiance::before {
    content:url('../img/icone-play.png');
    position: relative;
    top:10px;
    padding-right: 5px;
}
#niveau3-svg p.hover-titre , #niveau3-svg p.hover-titre-ambiance {
    font-size: 18px;
    color:#bd4b34;
    /*text-shadow: 1px 1px 1px rgba(255,255,255,0.4) ;*/

}
#niveau3-svg .hover-titre span {
    display: block;
    margin:0 100px 0 50px;
}
#niveau3-svg .hover-titre i, #niveau3-svg .hover-titre-ambiance i {
    background: rgba(255,255,255,0.7);
    font-style: normal;
}


/*Modal*/
.modal-dialog {
    max-width: 800px;
    margin:5% auto;
}
.modal-header {
    border-bottom: none;
}
.modal-body {
    padding: 0 1rem;
}
.modal-body iframe {
    width: 100%;
}
.modal-footer {
    border-top: none;
    position: relative;
}
.modal-footer a.ferme-video {
    cursor: pointer;
    position: absolute;
    left: 20px;
    bottom: 20px;
}
.modal-footer img {
    width:60px;
}
.modal-footer p {
    max-width: calc(100% - 100px);
}
#modal-video {
    width: 100%;
}

/*Fonds au survol des pastilles*/

body#niveau3-svg.youssoupha-ba {
    background-image: url("../img/fond-youssoupha-ba.jpg");
}
body#niveau3-svg.violaine-didier {
    background-image: url("../img/fond-violaine-didier.jpg");
}
body#niveau3-svg.alanne-bonnard {
    background-image: url("../img/fond-alanne-bonnard.jpg");
}
body#niveau3-svg.mass-diallo {
    background-image: url("../img/fond-mass-diallo.jpg");
}
body#niveau3-svg.khadim-fall {
    background-image: url("../img/fond-khadim-fall.jpg");
}
body#niveau3-svg.sylvie-dubois {
    background-image: url("../img/fond-sylvie-dubois.jpg");
}
body#niveau3-svg.francois-dols {
    background-image: url("../img/fond-francois-dols.jpg");
}
body#niveau3-svg.michaele-groshans {
    background-image: url("../img/fond-michaele-groshans.jpg");
    background-position: bottom right;
}
body#niveau3-svg.djiby-diol {
    background-image: url("../img/fond-djiby-diol.jpg");
}
body#niveau3-svg.mouhamadou-silla {
    background-image: url("../img/fond-mouhamadou-silla.jpg");
}
body#niveau3-svg.julie-camy {
    background-image: url("../img/fond-julie-camy.jpg");
}
body#niveau3-svg.abdoulay-sy {
    background-image: url("../img/fond-abdoulay-sy.jpg");
}
body#niveau3-svg.isabelle-seren {
    background-image: url("../img/fond-isabelle-seren.jpg");
}
body#niveau3-svg.amadou-diallo {
    background-image: url("../img/fond-amadou-diallo.jpg");
    background-position: top right;
}
body#niveau3-svg.lansana-sakho {
    background-image: url("../img/fond-lansana-sakho.jpg");
}
body#niveau3-svg.denis-duchamp {
    background-image: url("../img/fond-denis-duchamp.jpg");
}
body#niveau3-svg.khadiata-toure {
    background-image: url("../img/fond-khadiata-toure.jpg");
}
body#niveau3-svg.remi-touron {
    background-image: url("../img/fond-remi-touron.jpg");
}
body#niveau3-svg.ousman-diouf {
    background-image: url("../img/fond-ousman-diouf.jpg");
}
body#niveau3-svg.abou-fall {
    background-image: url("../img/fond-abou-fall.jpg");
    background-position: bottom right;
}
body#niveau3-svg.adja-lam {
    background-image: url("../img/fond-adja-lam.jpg");
}
body#niveau3-svg.souleye-ba {
    background-image: url("../img/fond-souleye-ba.jpg");
}
body#niveau3-svg.christine-benoit {
    background-image: url("../img/fond-christine-benoit.jpg");
}
body#niveau3-svg.patricia-brunel {
    background-image: url("../img/fond-patricia-brunel.jpg");
}
body#niveau3-svg.pierre-chatte {
    background-image: url("../img/fond-pierre-chatte.jpg");
}
body#niveau3-svg.penda-dia {
    background-image: url("../img/fond-penda-dia.jpg");
}
body#niveau3-svg.mamadou-hamady {
    background-image: url("../img/fond-mamadou-hamady.jpg");
}
body#niveau3-svg.alain-babylon {
    background-image: url("../img/fond-alain-babylon.jpg");
}
body#niveau3-svg.aminata-ba{
    background-image: url("../img/fond-aminata-ba.jpg");
}

body#niveau3-svg.puits {
    background: url("../img/fond-puits.jpg");
}
body#niveau3-svg.concession {
    background-image: url("../img/fond-concession.jpg");
}
body#niveau3-svg.le-troupeau {
    background-image: url("../img/fond-le-troupeau.jpg");
    background-position: center right;
}
body#niveau3-svg.cabine-pompage {
    background-image: url("../img/fond-cabine-pompage.jpg");
}
body#niveau3-svg.maraichage {
    background-image: url("../img/fond-maraichage.jpg");
}
body#niveau3-svg.ecole {
    background-image: url("../img/fond-ecole.jpg");
}
body#niveau3-svg.palabre {
    background-image: url("../img/fond-palabre.jpg");
}
body#niveau3-svg.village {
    background-image: url("../img/fond-village.jpg");
}
body#niveau3-svg.peintre {
    background-image: url("../img/fond-peintre.jpg");
    background-position: bottom right;
}
body#niveau3-svg.nuit {
    background-image: url("../img/fond-nuit.jpg");
}
body#niveau3-svg.chantier {
    background-image: url("../img/fond-chantier.jpg");
    background-position: bottom center;
}
body#niveau3-svg.autre-chantier {
    background-image: url("../img/fond-autre-chantier.jpg");
    background-position: bottom center;
}
body#niveau3-svg.borne-fontaine {
    background-image: url("../img/fond-borne-fontaine.jpg");
    background-position: bottom center;
}

/*Media Query pour IE*/
@media all and (-ms-high-contrast:none)
{
    #niveau3-svg #bloc-svg {
        padding-bottom:350px;
    }
    #niveau3-svg #bloc-svg svg {
        position:absolute;
    }
}



/* =====================================
FOOTER
===================================== */

footer {
    position: absolute;
    bottom: 10px;
    right:10px;
}
#acteurs footer, #sujet footer {
    clear: both;
    position: relative;
}
#acteurs footer {
    margin-top: 15%;
}
#sujet footer {
    top:50px;
}

/* Equalizer : animé avec le son, figé quand mute */
@keyframes eq-uppydowny {
    0% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(.5);
    }
    100% {
        transform: scaleY(1);
    }
}

.eq__bar {
    position: absolute;
    bottom: 0px;
    fill: #bd4b34;
    animation-name: eq-uppydowny;
    /*    animation-fill: forwards;*/
    animation-iteration-count: infinite; /* à changer en 1 quand sur mute puis remettre sur infinite quand play */
    transform-origin: 20px 40px;
    -webkit-transform-origin: 20px 40px;
    /*    rx:3;
        ry:3;*/
}

#eq1 {
    animation-duration: 0.8s;
    fill: #bd4b34;
}

#eq2 {
    animation-duration: 1.5s;
    fill: #bd4b34;
}

#eq3 {
    animation-duration: 1s;
    fill: #bd4b34;
}

#equalizer {
    position: absolute;
    bottom: 0;
    right: 70px;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

#retour {
    position: absolute;
    bottom: 5px;
    right: 140px;
}

.lien-credits {
    position: absolute;
    bottom: 15px;
    right: 10px;
}
.lien-credits a {
    font-size: 0.9em;
    text-transform: uppercase;
    font-weight: bold;
}
.lien-credits a:hover, .lien-credits a:active {
    color:#0f5c63;
}

.modal#credits .modal-dialog {
    max-width: 900px;
}
.modal#credits h2 {
    font-size: 1.5rem;
    text-align: left;
    border-bottom: solid 1px;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.modal#credits h3 {
    font-size: 1.3rem;
}
.modal#credits .modal-footer {
    margin-top:25px;
}