@charset "UTF-8";

/* ==========================
*  Louvre - Gillot
*  CSS
========================== */

body {
    overflow: hidden;
    margin: 0;
}

body,
html {
    height: 100%;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

*[lang='en']{
    display: none;
}

#video_veille{
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    z-index: 99;
}

#container {
    max-width: none !important;
    height: 100% !important;
}

/* ==========================
*  Louvre - Gillot
*  CSS - Intro
========================== */

.intro{
    background: url('../../images/bg/bg_intro.png') no-repeat;
    background-size: 100% 100%;
    height: 1080px;
    width: 1920px;
}

.intro .bloc-left{
    top: 269px;
    position: absolute;
    left: 147px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    width: 468px;
    text-align: center;
}

.intro .bloc-left h1{
    font-family: 'LouvreSerifRegular';
    font-size: 60px;
    font-weight: normal;
    margin: 39px 0 16px;
    font-style: italic;
}

.intro .bloc-left h2{
    font-family: 'UniversLTStdLight';
    font-size: 36px;
    font-weight: normal;
    margin: 0 0 28px;
    line-height: 60px;
}

.intro .bloc-right{
    position: absolute;
    left: 841px;
    top: 0;
    width: 861px;
    height: 1080px;
    overflow: hidden;
}

.intro .bloc-right .content{
    position: absolute;
    left: 0;
    top: 60px;
    width: 861px;
    height: 935px;
    overflow-x: hidden;
    overflow-y: auto;
}

.intro .bloc-right .content::-webkit-scrollbar {
    display: none;
}


.intro .bloc-right p{
    font-family: 'UniversLTStdCn';
    font-size: 36px;
    line-height: 47px;
    margin: 0 0 5px;
    letter-spacing: 0.2px;
    text-align: justify;
}

div#swap {
    font-family: 'UniversLTStdCn';
    font-size: 60px;
    position: absolute;
    right: 0;
    top: 0;
    text-align: center;
    height: 1025px;
    width: 150px;
}

div#swap span{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: url('../../images/tools/arrow_right.png') no-repeat;
    width: 23px;
    height: 40px;
    background-size: 100% 100%;    
}

.intro .bloc-right2{
    position: absolute;
    left: 1920px;
    top: 44px;
    width: 1160px;
    height: 960px;
    display: none;
}

.intro .bloc-right2 .slider-intro{
    background: url('../../images/tools/slider_intro.png') no-repeat;
    background-size: 100% 100%;
    width: 99px;
    height: 271px;
    display: inline-block;
    margin-top: 320px;
    margin-left: -16px;
}

.intro .bloc-right2 .slider-intro .up{
    background: url('../../images/tools/slider_intro_up.png') no-repeat;
    background-size: 100% 100%;
    width: 99px;
    height: 99px;
    display: none;
}

.intro .bloc-right2 .slider-intro .down{
    background: url('../../images/tools/slider_intro_down.png') no-repeat;
    background-size: 100% 100%;
    width: 99px;
    height: 99px;
    display: inline-block;
    margin-top: 170px;
}

.intro .bloc-right2 .items{
    display: inline-block;
    width: 1065px;
    position: absolute;
    right: 0;
    height: 960px;
    overflow-x: hidden;
    overflow-y: auto;
}

.intro .bloc-right2 .items::-webkit-scrollbar {
    display: none;
}

.intro .bloc-right2 .item{
    display: inline-block;
    margin-right: 45px;
    width: 304px;
    vertical-align: top;
}

.intro .bloc-right2 .item img{
    width: 304px;
    height: 234px;
    -webkit-box-shadow: 7px 0px 8px 0px rgba(0,0,0,0.5);
    box-shadow: 7px 0px 8px 0px rgba(0,0,0,0.5);
}

.intro .bloc-right2 .item p{
    font-family: 'UniversLTStdBold';
    font-size: 23px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    margin: 13px 0 53px;
    letter-spacing: -1px;
}

/* ==========================
*  Louvre - Gillot
*  CSS - BG fables
========================== */

#container[data-id="0"] .gravures, #container[data-id="0"] .infos, #container[data-id="0"] #popup_texte, #container[data-id="0"] #popup_image{
    background: url('../../images/bg/00_fond-discours.png') no-repeat;
    background-size: 100% 100%;
}

#container[data-id="1"] .gravures, #container[data-id="1"] .infos, #container[data-id="1"] #popup_texte, #container[data-id="1"] #popup_image{
    background: url('../../images/bg/01_fond-perroquet.png') no-repeat;
    background-size: 100% 100%;
}

#container[data-id="2"] .gravures, #container[data-id="2"] .infos, #container[data-id="2"] #popup_texte, #container[data-id="2"] #popup_image{
    background: url('../../images/bg/02_fond-singes-matelots.png') no-repeat;
    background-size: 100% 100%;
}

#container[data-id="3"] .gravures, #container[data-id="3"] .infos, #container[data-id="3"] #popup_texte, #container[data-id="3"] #popup_image{
    background: url('../../images/bg/03_fond-castor-boeuf.png') no-repeat;
    background-size: 100% 100%;
}

#container[data-id="4"] .gravures, #container[data-id="4"] .infos, #container[data-id="4"] #popup_texte, #container[data-id="4"] #popup_image{
    background: url('../../images/bg/04_fond-estomac.png') no-repeat;
    background-size: 100% 100%;
}

#container[data-id="5"] .gravures, #container[data-id="5"] .infos, #container[data-id="5"] #popup_texte, #container[data-id="5"] #popup_image{
    background: url('../../images/bg/05_fond-portrait.png') no-repeat;
    background-size: 100% 100%;
}

#container[data-id="6"] .gravures, #container[data-id="6"] .infos, #container[data-id="6"] #popup_texte, #container[data-id="6"] #popup_image{
    background: url('../../images/bg/06_fond-chat-souris.png') no-repeat;
    background-size: 100% 100%;
}

#container[data-id="7"] .gravures, #container[data-id="7"] .infos, #container[data-id="7"] #popup_texte, #container[data-id="7"] #popup_image{
    background: url('../../images/bg/07_fond-les2livres.png') no-repeat;
    background-size: 100% 100%;
}

#container[data-id="8"] .gravures, #container[data-id="8"] .infos, #container[data-id="8"] #popup_texte, #container[data-id="8"] #popup_image{
    background: url('../../images/bg/08_fond-chameau.png') no-repeat;
    background-size: 100% 100%;
}

#container[data-id="9"] .gravures, #container[data-id="9"] .infos, #container[data-id="9"] #popup_texte, #container[data-id="9"] #popup_image{
    background: url('../../images/bg/09_fond-animaux-comediens.png') no-repeat;
    background-size: 100% 100%;
}

#container[data-id="10"] .gravures, #container[data-id="10"] .infos, #container[data-id="10"] #popup_texte, #container[data-id="10"] #popup_image{
    background: url('../../images/bg/10_fond-victimes.png') no-repeat;
    background-size: 100% 100%;
}

#container[data-id="11"] .gravures, #container[data-id="11"] .infos, #container[data-id="11"] #popup_texte, #container[data-id="11"] #popup_image{
    background: url('../../images/bg/11_fond-chien-chat.png') no-repeat;
    background-size: 100% 100%;
}

#container[data-id="12"] .gravures, #container[data-id="12"] .infos, #container[data-id="12"] #popup_texte, #container[data-id="12"] #popup_image{
    background: url('../../images/bg/12_fond-festin-lion.png') no-repeat;
    background-size: 100% 100%;
}

#container[data-id="13"] .gravures, #container[data-id="13"] .infos, #container[data-id="13"] #popup_texte, #container[data-id="13"] #popup_image{
    background: url('../../images/bg/13_fond-horoscope-lion.png') no-repeat;
    background-size: 100% 100%;
}

#container[data-id="14"] .gravures, #container[data-id="14"] .infos, #container[data-id="14"] #popup_texte, #container[data-id="14"] #popup_image{
    background: url('../../images/bg/13_fond-horoscope-lion.png') no-repeat;
    background-size: 100% 100%;
}

/* ==========================
*  Louvre - Gillot
*  CSS - Gravure
========================== */

.gravures{
    background: url('../../images/bg/bg_gravure.png') no-repeat;
    background-size: 100% 100%;
    height: 1080px;
    width: 1920px;
    display: none;
}

.gravures .bloc-left{
    position: absolute;
    left: 130px;
    top: 63px;
    width: 538px;
}

.gravures .bloc-left .texte{
    display: inline-block;
    min-height: 530px;
    background: #e6d68080;
    padding-bottom: 20px;
}

.gravures .bloc-left .texte h2{
    font-family: 'UniversLTStdBold';
    font-size: 30px;
    text-align: center;
    text-transform: uppercase;
    line-height: 35px;
    margin: 42px 0 49px;
    letter-spacing: -2px;
}

.gravures .bloc-left .texte p{
    font-family: 'UniversLTStdCn';
    font-size: 30px;
    padding: 0 15px 0 37px;
    margin: 0;
    letter-spacing: 0.3px;
    line-height: 37px;
}

.gravures .bloc-left .texte #book, .infos .bloc-right #book-info{
    background: none;
    border: none;
    position: absolute;
    top: -30px;
    right: -50px;
}

.gravures .bloc-left .morale{
    margin-top: 40px;
}


.gravures .bloc-left .morale h2{
    font-family: 'UniversLTStdBold';
    font-size: 30px;
    text-align: center;
    text-transform: uppercase;
    line-height: 35px;
    margin: 42px 0 24px;
    letter-spacing: -2px;
}

.gravures .bloc-left .morale p{
    font-family: 'F25_Executive';
    font-size: 30px;
    padding: 0 0 0 15px;
    margin: 0;
    letter-spacing: 0.3px;
    line-height: 37px;
}

.gravures .bloc-right{
    position: absolute;
    left: 828px;
    top: 60px;
}

.gravures .bloc-right #loupe, .infos .bloc-left #loupe_infos{
    background: none;
    border: none;
    position: absolute;
    top: -25px;
    right: -30px;
}

.gravures .bloc-right #slider{
    padding: 0; 
    width: 950px;
    height: 942px;
}

.gravures .bloc-right #image{
    width: 950px;
    height: 775px;
}

.gravures .bloc-right #image img{
    width: 100%;
    height: 100%;
}

.gravures .bloc-right #slick{
    width: 693px;
    margin: auto;
    margin-top: 45px;
}

.gravures .bloc-right #slick .slick-slide img{
    width: 113px;
    height: 110px;
}

.gravures .bloc-right #slick .slick-slide{
    margin-top: 4px;
    margin-left: 4px;
    margin-right: -4px;
}

.gravures .bloc-right #slick .slick-slide.slide-hover{
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
}

.gravures .bloc-right #slick .slick-slide.slide-hover img{
    border: 4px solid #e4cd50;
}

.gravures .bloc-right .nav{
    position: absolute;
    bottom: 90px;
    width: 950px;
}

.gravures .bloc-right .nav .prev{
    background: url('../../images/tools/arrow_left.png') no-repeat;
    background-size: 100% 100%;
    height: 49px;
    width: 27px;
    position: absolute;
    left: 63px;
}

.gravures .bloc-right .nav .next{
    background: url('../../images/tools/arrow_right.png') no-repeat;
    background-size: 100% 100%;
    height: 49px;
    width: 27px;
    position: absolute;
    right: 74px;
}

/* ==========================
*  Louvre - Gillot
*  CSS - Infos
========================== */

.infos{
    background: url('../../images/bg/bg_gravure.png') no-repeat;
    background-size: 100% 100%;
    height: 1080px;
    width: 1920px;
    display: none;
}

.infos .bloc-left{
    position: absolute;
    left: 0;
    top: 0;
    width: 1486px;
}

.infos .bloc-left #loupe_infos{
    top: 7px;
    right: 0;
}

.infos .bloc-left #image_infos img:not(:first-child){
    display: none;
}

.infos .bloc-left #image_infos img{
    height: auto;
    width: 1486px;
}

.infos .bloc-right{
    position: absolute;
    right: 0;
    top: 0;
    width: 434px;
}

.infos .bloc-right #book-info{
    top: 317px;
    left: 50%;
    transform: translateX(-50%);
}

.infos .bloc-right .texte{
    text-align: center;
    margin: 450px auto 0;
    width: 90%;
}

.infos .bloc-right .texte h2{
    font-family: 'UniversLTStdRegular';
    font-weight: normal;
    font-size: 30px;
    margin: 0;
    letter-spacing: -1px;
}

.infos .bloc-right .texte p.title{
    font-family: 'UniversLTStdBold';
    font-size: 29px;
    margin: 5px 0 0;
    letter-spacing: -1px;
    font-style: italic;
}

.infos .bloc-right .texte p.legend, .infos .bloc-right .texte p.legend2, .infos .bloc-right .texte p.img2_legend2{
    font-family: 'UniversLTStdRegular';
    font-weight: normal;
    font-size: 29px;
    margin: 2px 0 0;
    letter-spacing: -1px;
}

.infos .bloc-right .texte p.legend2, .infos .bloc-right .texte p.img2_legend2{
    margin-top: 19px;
    line-height: 36px;
}

.infos .bloc-right .texte h2.img2_person, .infos .bloc-right .texte p.img2_legend2{
    display: none;
}

.infos .bloc-right .thumbnails{
    width: 434px;
    margin-top: 39px;
    text-align: center;
}

.infos .bloc-right .thumbnails .thumb{
    display: inline-block;
    margin-right: 11px;
    vertical-align: middle;
    display: none;
}

.infos .bloc-right .thumbnails .thumb[data-slice="0"]{
    margin-left: 8px;
}

.infos .bloc-right .thumbnails .thumb[data-slice="0"].selected{
    margin-left: 0;
}

.infos .bloc-right .thumbnails .thumb.selected img{
    border: 8px solid #e4cd50;
}

/* ==========================
*  Louvre - Gillot
*  CSS - Modal
========================== */

#popup_image{
    height: 1080px;
    width: 1920px;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background: url('../../images/bg/bg_gravure.png') no-repeat;
}

#popup_image_container{
    height: 1080px;
    width: 1920px;
    text-align: center;
}

#popup_image img{
    height: 100%;
    width: auto;
}

#close {
    display: none;
    position: absolute;
    top: 5%;
    right: 5%;
    color: #000;
    width: auto;
    padding: 3px;
    z-index: 3;
    background: #e4cd50;
    border-radius: 50%;
    width: 84px;
    height: 90px;
    border: none;
    background: url('../../images/tools/fermer.png') no-repeat;
    background-size: 100% 100%;
}

/* ==========================
*  Louvre - Gillot
*  CSS - Modal texte
========================== */

#popup_texte{
    height: 1080px;
    width: 1920px;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background: url('../../images/bg/bg_gravure.png') no-repeat;
}

#popup_texte_container{
    height: 1025px;
    width: 1251px;
    text-align: center;
    margin: auto;
    overflow-x: hidden;
    overflow-y: auto;
    background: url('../../images/bg/bg_fable.png') no-repeat;
}

#popup_texte_container::-webkit-scrollbar {
    display: none;
}

#popup_texte_container .texte{
    padding-top: 38px;
    padding-bottom: 50px;
    transition: transform .5s ease;
}

#popup_texte_container h2{
    font-family: 'F25_Executive';
    margin: 0;
    font-size: 30px;
    font-weight: normal;
    text-transform: uppercase;
}

#popup_texte_container h2 .noitalic{
    text-transform: none;
}

#popup_texte img{
    height: 454px;
    width: auto;
    margin: 50px 0;
}

#popup_texte .separateur{
    height: 100px;
    width: auto;
}

#popup_texte p{
    width: 1100px;
    margin: auto;
    font-family: 'F25_Executive';
    font-size: 30px;
    font-weight: normal;
}

#close2 {
    display: none;
    position: absolute;
    top: 3%;
    right: 13%;
    color: #FFF;
    width: auto;
    padding: 3px;
    z-index: 3;
    background: #e4cd50;
    border-radius: 50%;
    width: 84px;
    height: 90px;
    border: none;
    background: url('../../images/tools/fermer.png') no-repeat;
    background-size: 100% 100%;
}

.scroll-top{
    background: url('../../images/tools/slider_intro_up.png') no-repeat;
    background-size: 100% 100%;
    width: 130px;
    height: 130px;
    display: inline-block;
    position: absolute;
    right: 220px;
    top: 357px;
}

.scroll-bottom{
    background: url('../../images/tools/slider_intro_down.png') no-repeat;
    background-size: 100% 100%;
    width: 130px;
    height: 130px;
    display: inline-block;
    margin-top: 170px;
    position: absolute;
    right: 217px;
    top: 419px;
}

/* ==========================
*  Louvre - Gillot
*  CSS - Modal credits
========================== */

#popup_credit{
    height: 1080px;
    width: 1920px;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background: url('../../images/bg/bg_gravure.png') no-repeat;
}

#popup_credit_container{
    height: 1025px;
    width: 1251px;
    text-align: center;
    margin: auto;
    overflow-x: hidden;
    overflow-y: auto;
    background: #eeeadb;
}

#popup_credit_container::-webkit-scrollbar {
    display: none;
}

#popup_credit_container .credits{
    padding-top: 38px;
    padding-bottom: 50px;
    transition: transform .5s ease;
}

#popup_credit_container h2{
    font-family: 'F25_Executive';
    margin: 0 0 50px;
    font-size: 35px;
    font-weight: normal;
}

#popup_credit_container h3{
    font-family: 'F25_Executive';
    margin: 100px 0 40px;
    font-size: 27px;
    font-weight: normal;
}

#popup_credit_container p{
    width: 800px;
    margin: auto;
    font-family: 'F25_Executive';
    font-size: 25px;
    font-weight: normal;
    margin-bottom: 30px;
    width: 90%;
}

#popup_credit_container p.bold{
    font-weight: bold;
    font-style: italic;
    margin-bottom: 15px;
}

#close3 {
    display: none;
    position: absolute;
    top: 3%;
    right: 13%;
    color: #FFF;
    width: auto;
    padding: 3px;
    z-index: 3;
    background: #e4cd50;
    border-radius: 50%;
    width: 84px;
    height: 90px;
    border: none;
    background: url('../../images/tools/fermer.png') no-repeat;
    background-size: 100% 100%;
}

.scroll-top2{
    background: url('../../images/tools/slider_intro_up.png') no-repeat;
    background-size: 100% 100%;
    width: 130px;
    height: 130px;
    display: inline-block;
    position: absolute;
    right: 220px;
    top: 357px;
}

.scroll-bottom2{
    background: url('../../images/tools/slider_intro_down.png') no-repeat;
    background-size: 100% 100%;
    width: 130px;
    height: 130px;
    display: inline-block;
    margin-top: 170px;
    position: absolute;
    right: 217px;
    top: 419px;
}


/* ==========================
*  Louvre - Gillot
*  CSS - Footer
========================== */

footer {
    position: absolute;
    bottom: 0;
    height: 55px;
    background: #e4cd50;
    width: 100%;
}

footer #retour{
    font-size: 20px;
    margin-top: 15px;
    margin-left: 32px;
    display: none;
    font-family: 'UniversLTStdRegular';
}

footer #retour .arrow_footer{
    background: url('../../images/tools/arrow_footer.png') no-repeat;
    background-size: 100% 100%;
    width: 14px;
    height: 24px;
    display: inline-block;
    vertical-align: top;
}

footer #retour .arrow_footer[lang='en']{
    display: none;
}

footer #widget-right{
    position: absolute;
    right: 0;
    height: 40px;
    top: 5px;
}

footer button{
    background: none;
    border: none;
}

footer button#debut{
    font-size: 31px;
    padding: 0px 8px 0 0;
    border-right: 2px solid black;
    width: 123px;
    letter-spacing: -2px;
    height: 30px;
    margin-top: 8px;
    vertical-align: top;
    line-height: 28px;
    font-family: 'UniversLTStdRegular';
}

footer button#start{
    font-size: 31px;
    padding: 0 8px 0 0;
    border-right: 2px solid black;
    width: 112px;
    letter-spacing: -2px;
    height: 30px;
    margin-top: 8px;
    vertical-align: top;
    line-height: 28px;
    font-family: 'UniversLTStdRegular';
}

footer button#text{
    height: 100%;
    width: 122px;
    border-right: 1px solid black;
    padding: 0;
}

footer button#contrast{
    height: 100%;
    width: 118px;
    border-right: 1px solid black;
    padding: 0;
}

footer button#credit{
    height: 100%;
    width: 55px;
    padding: 0;
}

footer button img{
    height: 25px;
}

footer button p{
    font-size: 35px;
    margin: 0;
}

footer #debut,
footer #start {
    text-transform: uppercase;
}

/* ==========================
*  Louvre - Gillot
*  CSS - Accessibility
========================== */

.accessibility-text .intro .bloc-left{
    width: 530px;
    left: 85px;
}

.accessibility-text .intro .bloc-left h1{
    font-size: 70px;
}

.accessibility-text .intro .bloc-left h2{
    font-size: 45px;
}

.accessibility-text .gravures .bloc-left .morale{
    width: 700px;
    margin-left: -50px;
}

.accessibility-text .gravures .bloc-left .texte h2,
.accessibility-text .gravures .bloc-left .texte p,
.accessibility-text .gravures .bloc-left .morale h2,
.accessibility-text .gravures .bloc-left .morale p,
.accessibility-text .infos .bloc-right .texte h2,
.accessibility-text #popup_texte_container h2,
.accessibility-text #popup_texte p {
    font-size: 36px;
}

.accessibility-text .intro .bloc-right p,
.accessibility-text #popup_credit_container h2{
    font-size: 40px;
}

.accessibility-text .intro .bloc-right2 .item p,
.accessibility-text #popup_credit_container p{
    font-size: 30px;
}

.accessibility-text .infos .bloc-right .texte p.title, 
.accessibility-text .infos .bloc-right .texte p.legend, 
.accessibility-text .infos .bloc-right .texte p.legend2,
.accessibility-text .infos .bloc-right .texte p.img2_legend2,
.accessibility-text #popup_credit_container h3{
    font-size: 35px;
}

.accessibility-contrast .intro .bloc-left{
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}

.accessibility-contrast #container .intro,
.accessibility-contrast #container .gravures, 
.accessibility-contrast #container .infos,
.accessibility-contrast #container #popup_image,
.accessibility-contrast #container #popup_texte,
.accessibility-contrast #container #popup_credit{
    background: #000000;
    color: #ffffff;
}

.accessibility-contrast #container .gravures .bloc-left .texte {
    background-color: #20602B;
}

.accessibility-contrast #container .gravures .bloc-right .nav .prev {
    background-image: url('../../images/tools/arrow_left_white.png');   
}

.accessibility-contrast #container .gravures .bloc-right .nav .next {
    background-image: url('../../images/tools/arrow_right_white.png');   
}

.accessibility-contrast #container #popup_texte_container,
.accessibility-contrast #container #popup_credit_container{
    background: #FFF;
    color: #000;
}

.accessibility-contrast footer{
    background: #f0f0f1;
    border-top: 1px solid #000000;
}

.accessibility-contrast .infos .bloc-right .thumbnails .thumb.selected img{
    border: 8px solid #ffffff;
}

.accessibility-contrast .gravures .bloc-right #slick .slick-slide.slide-hover img {
    border: 4px solid #ffffff;
}

.accessibility-contrast #close,
.accessibility-contrast #close2,
.accessibility-contrast #close3{
    background: url('../../images/tools/fermer_contrast.png') no-repeat;
    background-size: 100% 100%;
}

.accessibility-contrast div#swap span{
    background: url('../../images/tools/arrow_right_white.png') no-repeat;
    background-size: 100% 100%;    
}