#close-gallery-bt,
        #gallery-bt,
        #reset-bt {
            right: 0;
            border-bottom-left-radius: 1.25em;
            background-position-x: 1rem
        }

        #close-gallery-bt,
        .bckgd-gray {
            background-color: #d2d2d2
        }

        #head-sommaire h2,
        #le-livre h1,
        #le-livre h2,
        #menu-container .links-wrapper {
            text-transform: uppercase;
            font-weight: 700
        }

        #bottom-link,
        #le-livre .shadow-bottom,
        #le-livre img {
            bottom: 0;
            position: absolute
        }

        @font-face {
            font-family: 'Open Sans';
            src: url(../fonts/OpenSans/Regular/OpenSans-Regular.woff2?v=1.101) format("woff2"), url(../fonts/OpenSans/Regular/OpenSans-Regular.woff?v=1.101) format("woff");
            font-weight: 400;
            font-style: normal
        }

        body,
        html {
            margin: 0;
            height: 100%;
            background-color: #f5f7f8
        }

        .section {
            position: relative;
            width: 100%;
            height: 100%;
            top: 0
        }

        #le-livre {
            background-color: #e89661;
            overflow: hidden
        }

        #le-livre img {
            left: 0;
            width: 100%;
            z-index: 1
        }

        #le-livre .title-bloc {
            max-width: 400px;
            left: 50%;
            position: absolute;
            margin-left: -200px;
            z-index: 3
        }

        #le-livre h1 {
            font-size: 3.8rem;
            line-height: 1em
        }

        #le-livre h1,
        #le-livre h2 {
            font-family: OpenSansCondensedBold, "Open Sans", sans-serif;
            color: #fff;
            text-align: center
        }

        #bottom-link a,
        #menu-bt.active:after {
            font-family: "Open Sans", sans-serif
        }

        #le-livre .shadow-bottom {
            -webkit-box-shadow: inset 0 -10.8em 4.15em -5em rgba(0, 0, 0, .7);
            -moz-box-shadow: inset 0 -10.8em 4.15em -5em rgba(0, 0, 0, .7);
            box-shadow: inset 0 -10.8em 4.15em -5em rgba(0, 0, 0, .7);
            z-index: 2;
            height: 10.8em;
            width: 100%
        }

        #close-gallery-bt,
        #gallery-bt,
        #menu-bt,
        #reset-bt {
            width: 3rem;
            height: 2.5rem;
            position: fixed;
            top: 4rem;
            background-size: 1.5em;
            background-repeat: no-repeat;
            background-position-y: center;
            cursor: pointer
        }

        #bottom-link {
            text-align: center;
            width: 10rem;
            left: 50%;
            margin-left: -5rem;
            height: 5rem;
            z-index: 3
        }

        #bottom-link a {
            padding-bottom: 2em;
            color: #fff;
            text-decoration: none;
            background-image: url(../img/arrow-bottom.png);
            background-repeat: no-repeat;
            background-position: bottom;
            background-size: 2rem
        }

        #gallery-bt,
        #reset-bt {
            visibility: hidden;
            z-index: 40;
            border-top-left-radius: 1.25em
        }

        #gallery-bt {
            background-image: url(../img/th.svg)
        }

        #reset-bt {
            background-image: url(../img/undo-alt.svg)
        }

        #gallery-bt.active,
        #reset-bt.active {
            visibility: visible
        }

        #close-gallery-bt {
            background-image: url(../img/cross-white.svg);
            z-index: 99;
            border-top-left-radius: 1.25em
        }

        #menu-bt {
            border-bottom-right-radius: 1.25em;
            border-top-right-radius: 1.25em;
            z-index: 42;
            background-image: url(../img/equals-light.svg);
            background-position-x: .5rem;
            -webkit-transition: background-color .2s;
            -moz-transition: background-color .2s;
            -ms-transition: background-color .2s;
            -o-transition: background-color .2s;
            transition: background-color .2s
        }

        #menu-bt.active {
            background-image: url(../img/cross-white.svg);
            background-color: #6a6b6c
        }

        #menu-bt.active:after {
            content: "Fermer";
            font-size: .7rem;
            position: relative;
            left: 100%;
            top: 25%;
            margin-left: 1rem
        }

        #menu-container {
            position: fixed;
            top: 0;
            z-index: 41;
            width: 100%;
            height: 100%;
            background: rgba(236, 239, 241, .97);
            overflow-y: scroll;
            visibility: hidden;
            opacity: 0;
            -webkit-transition: all .2s;
            -moz-transition: all .2s;
            -ms-transition: all .2s;
            -o-transition: all .2s;
            transition: all .2s
        }

        #menu-container.active {
            visibility: visible;
            opacity: 1
        }

        #menu-container .links-wrapper {
            width: 350px;
            display: grid;
            font-family: OpenSansCondensedBold, "Open Sans", sans-serif;
            position: relative;
            left: 50%;
            margin-left: -175px;
            margin-top: 6rem
        }

        #menu-container .links-wrapper a {
            color: #aaadad;
            text-decoration: none;
            font-size: 2.8rem;
            font-weight: 700;
            margin: .8rem;
            -webkit-transition: color .2s;
            -moz-transition: color .2s;
            -ms-transition: color .2s;
            -o-transition: color .2s;
            transition: color .2s
        }

        #menu-container .links-wrapper a:hover {
            color: #000
        }

        #menu-container .links-wrapper a.active,
        #menu-container .links-wrapper a.active:hover {
            color: #b62d25
        }

        #menu-container .share-box {
            text-align: center;
            font-family: "Open Sans", sans-serif;
            margin-top: 1.5rem
        }

        #menu-container .share-box img {
            position: relative;
            width: 1.25rem;
            height: 1.25rem;
            margin-top: 1rem;
            margin-left: .5rem;
            margin-right: .5rem
        }

        #menu-container .share-box a {
            opacity: .5;
            -webkit-transition: opacity .2s;
            -moz-transition: opacity .2s;
            -ms-transition: opacity .2s;
            -o-transition: opacity .2s;
            transition: opacity .2s;
            margin-top: 5rem
        }

        #menu-container .share-box a:hover {
            opacity: 1
        }

        .box-shortcut {
            position: absolute;
            width: 40px;
            height: 150px;
            z-index: 3;
            margin-left: 1em
        }

        .box-shortcut a img {
            width: 20px;
            padding-top: 10px;
            padding-bottom: 9px;
            margin-bottom: -4.6px
        }

        .box-shortcut .shortcut {
            text-align: center;
            margin-bottom: 15px;
            border-radius: 50%
        }

        #sommaire {
            background-color: #f5f7f8;
            height: auto
        }

        #head-sommaire {
            position: relative;
            width: 100%;
            padding-top: 3rem;
            margin-bottom: 3rem
        }

        #head-sommaire img {
            width: 2.5rem;
            position: relative;
            left: 50%;
            margin-left: -1.25rem
        }

        #head-sommaire h2 {
            font-family: OpenSansCondensedBold, "Open Sans", sans-serif;
            margin-top: .2rem;
            margin-bottom: 0;
            text-align: center;
            font-size: 2.4em
        }

        .part .toggle-head-wrapper .number-part,
        .part .toggle-head-wrapper .title-part,
        .subpart .subpart-container {
            font-family: "Open Sans", sans-serif
        }

        .part .container-toggle-head {
            cursor: pointer;
            -webkit-transition: background-color .2s;
            -moz-transition: background-color .2s;
            -ms-transition: background-color .2s;
            -o-transition: background-color .2s;
            transition: background-color .2s
        }

        #sommaire .part,
        .part .container-toggle-head {
            position: relative;
            width: 100%
        }

        .part:nth-child(odd) .container-toggle-head {
            background-color: #dae0e3
        }

        .part:nth-child(even) .container-toggle-head {
            background-color: #eaeef0
        }

        .part {
            color: #000;
            -webkit-transition: color .2s;
            -moz-transition: color .2s;
            -ms-transition: color .2s;
            -o-transition: color .2s;
            transition: color .2s
        }

        .part.active {
            color: #fff
        }

        .part.active .container-toggle-head {
            background-color: #000
        }

        .part .toggle-head-wrapper {
            display: flex;
            max-width: 1024px;
            margin: auto
        }

        .part .toggle-head-wrapper .number-part {
            font-weight: 700;
            font-size: 1.8rem;
            margin-top: 1rem;
            margin-bottom: 1rem;
            width: 2em;
            padding-left: .5rem;
            text-align: center;
            padding-right: .5rem
        }

        .part .toggle-head-wrapper .title-part-container {
            width: 100%;
            display: flex
        }

        .part .toggle-head-wrapper .title-part {
            font-weight: 700;
            font-size: 1.1rem;
            line-height: 1em;
            margin-top: auto;
            margin-bottom: auto;
            padding: 1rem 0
        }

        .part .toggle-head-wrapper .title-part small {
            font-size: .8rem
        }

        .part .toggle-head-wrapper .arrow {
            background-image: url(../img/chevron-down.svg);
            width: 2rem;
            height: auto;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            margin: 0 1rem
        }

        .part.active .toggle-head-wrapper .arrow {
            background-image: url(../img/chevron-up.svg)
        }

        .part.active .subpart {
            display: block;
            color: #000;
            border-bottom: 1px solid #7a7b7c;
            position: relative
        }

        .part .subpart {
            display: none
        }

        .subpart .subpart-container {
            display: flex;
            max-width: 1024px;
            position: relative;
            margin: auto;
            font-weight: 300
        }

        .subpart-container .read-progression-container {
            width: 3rem;
            text-align: center;
            display: flex;
            flex-direction: column;
            margin-top: auto;
            margin-bottom: auto;
            padding: 1rem
        }

        .subpart-container .read-progression-container .progression-number {
            font-size: 1.1rem;
            margin: 0;
            line-height: 1em
        }

        .subpart-container .read-progression-container .label {
            font-size: .7rem
        }

        .subpart-container .subpart-title-container {
            display: flex;
            width: 100%
        }

        .subpart-container .subpart-title-container h4 {
            margin: auto 0;
            font-size: .9rem;
            line-height: 1em;
            padding: 1rem 0
        }

        .subpart-container .go-button {
            margin: auto 1rem;
            font-size: .7rem
        }

        .subpart-container .go-button a {
            text-decoration: none;
            color: #000
        }

        .subpart-container .go-button .arrow {
            background-image: url(../img/chevron-right.svg);
            height: 1rem;
            padding-left: 1.8rem;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: right
        }

        .subpart .progress-visual-bckgd {
            position: absolute;
            width: 0;
            height: 100%;
            background: #edf0f2;
            border-bottom: 1px #e99662 solid
        }

        #photos {
            max-width: 1024px;
            margin: auto;
            position: relative;
            height: auto
        }

        #photos h2 {
            font-family: OpenSansCondensedBold, "Open Sans", sans-serif;
            font-weight: 700;
            text-align: center;
            font-size: 2.4rem;
            line-height: 1em;
            margin-bottom: 1rem;
            margin-top: 0;
            padding-top: 1em
        }

        #img-grid-overlay .container-gallery .legend,
        #photos h5 {
            font-size: .9rem;
            font-family: "Open Sans", sans-serif;
            text-align: center
        }

        #photos h5 {
            margin-bottom: 3rem;
            margin-top: 0;
            font-weight: 300
        }

        #scroll-bottom {
            width: 2rem;
            height: 2rem;
            background-image: url(../img/arrow-bottom.png);
            background-repeat: no-repeat;
            background-size: contain;
            position: fixed;
            top: 100%;
            margin-top: -2rem;
            left: 50%;
            margin-left: -1rem;
            z-index: 42;
            cursor: pointer
        }

        #img-grid-overlay {
            visibility: hidden;
            opacity: 0;
            position: fixed;
            width: 100%;
            height: 100%;
            overflow-y: scroll;
            -webkit-transition: opacity .2s;
            -moz-transition: opacity .2s;
            -ms-transition: opacity .2s;
            -o-transition: opacity .2s;
            transition: opacity .2s;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, .9);
            z-index: 41;
            overflow-x: hidden;
            padding-right: 42px
        }

        #img-grid-overlay.active {
            visibility: visible;
            opacity: 1
        }

        #img-grid-overlay .img-list-container {
            position: relative;
            max-width: 768px;
            padding: 7rem 3rem 3rem;
            margin: auto
        }

        #img-grid-overlay .container-gallery {
            width: 100%;
            height: 100vh;
            position: relative;
            text-align: center
        }

        #img-grid-overlay .container-gallery img {
            width: auto;
            max-width: 100%;
            height: 100%;
            position: relative;
            margin: 0 auto
        }

        #img-grid-overlay .container-gallery .legend {
            padding: 2rem 0;
            color: #fff;
            font-weight: 500
        }

        #a-propos .content-text,
        #masonry-container,
        .head-section h5 {
            padding-left: 3rem;
            padding-right: 3rem
        }

        #img-grid-overlay .container-gallery .legend img {
            height: 1rem;
            margin-left: .5rem;
            margin-right: .5rem
        }

        #masonry-container {
            -moz-column-count: 3;
            -webkit-column-count: 3;
            column-count: 3;
            max-width: 1024px;
            margin: 0 auto
        }

        #masonry-container .img-in-grid {
            margin-bottom: 1rem;
            cursor: pointer
        }

        #masonry-container .img-in-grid img {
            -moz-transition: all .5s ease-in-out;
            -webkit-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;
            width: 100%;
            vertical-align: bottom
        }

        #masonry-container,
        #masonry-container .img-in-grid,
        #masonry-container .img-in-grid::after,
        #masonry-container .img-in-grid::before {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            overflow: hidden
        }

        #le-livre .blur-up {
            -webkit-filter: blur(15px);
            filter: blur(15px)
        }

        .blur-up {
            -webkit-filter: blur(7px);
            filter: blur(7px);
            transition: filter .4s, -webkit-filter .4s
        }

        #le-livre .blur-up.lazyloaded,
        .blur-up.lazyloaded {
            -webkit-filter: blur(0);
            filter: blur(0)
        }

        #a-propos {
            width: 100%;
            height: auto;
            font-family: "Open Sans", sans-serif;
            font-size: 1rem
        }

        .head-section {
            position: relative;
            text-align: center;
            margin-bottom: 5rem;
            border-bottom: 1px #9b9c9d solid
        }

        .head-section h2 {
            font-family: OpenSansCondensedBold, "Open Sans", sans-serif;
            font-weight: 700;
            font-size: 2.4rem
        }

        #a-propos .content-text,
        #contributeurs,
        .head-section h5 {
            font-family: "Open Sans", sans-serif
        }

        .head-section h5 {
            font-size: 1.1rem;
            font-weight: 400;
            max-width: 480px;
            margin: auto auto 3rem
        }

        #a-propos .content-text {
            max-width: 1024px;
            margin: auto;
            font-weight: 300
        }

        #contributeurs {
            height: auto;
            padding-top: 3rem
        }

        #contributeurs .contributeur-content .contributeur-container * {
            max-width: 480px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
            padding-left: 3rem;
            padding-right: 3rem
        }

        .contributeur-content .contributeur-container h6 {
            font-size: 1rem;
            font-weight: 700;
            padding-bottom: 1rem;
            margin-bottom: 0;
            margin-top: 3rem
        }

        .contributeur-content .contributeur-container .description {
            padding-bottom: 1rem;
            font-family: "Open Sans", sans-serif;
            font-weight: 300
        }

        .contributeur-content .contributeur-container img {
            margin-left: auto;
            margin-right: auto;
            height: 3rem;
            display: block
        }

        .contributeur-content .contributeur-container a {
            text-decoration: none;
            color: #000
        }

        .contributeur-content .contributeur-container {
            margin-bottom: 3rem;
            padding-bottom: 3rem;
            border-bottom: 1px #9b9c9d solid
        }

        .contributeur-container .description .additional-notes {
            font-size: .8rem;
            font-style: italic;
            margin-top: 1rem
        }

        .head-progression {
            position: absolute;
            bottom: 0;
            left: 0;
            background: #e99662;
            height: 1px;
            width: 0
        }

        #img-grid-overlay .container-gallery.paysage {
            height: auto;
            min-height: 100vh
        }

        #img-grid-overlay .container-gallery>img {
            max-height: 70%;
            margin: auto;
            height: auto;
            width: 100%
        }

        #img-grid-overlay .container-gallery.portrait>img {
            width: auto
        }

        #img-grid-overlay .container-gallery .legend {
            height: 30%;
            box-sizing: border-box;
            width: 100%
        }

        @media (max-width:480px) {
            #menu-container .links-wrapper {
                width: auto;
                left: 0;
                margin-left: 0;
                padding-left: 3rem
            }

            #menu-container .links-wrapper a {
                font-size: 1.8rem
            }

            #le-livre h1 {
                font-size: 3.2rem
            }

            #le-livre h2 {
                font-size: 1.4rem
            }

            #img-grid-overlay .img-grid-container {
                padding-left: .5rem;
                padding-right: .5rem
            }

            #le-livre .title-bloc {
                max-width: 300px;
                margin-left: -150px
            }

            .box-shortcut {
                bottom: 0;
                margin-top: 0
            }

            #img-grid-overlay .img-list-container {
                padding: 7rem 1rem 3rem
            }

            #masonry-container {
                padding-left: 1rem;
                padding-right: 1rem
            }

            #img-grid-overlay .container-gallery .legend {
                font-size: .75em
            }
        }

        @media (max-width:768px) {
            .box-shortcut {
                bottom: 0;
                margin-bottom: 1rem;
                height: 200px
            }

            #masonry-container {
                -moz-column-count: 2;
                -webkit-column-count: 2;
                column-count: 2
            }

            #img-grid-overlay .container-gallery .legend {
                padding: 1rem 0;
                font-size: .85em
            }
        }

        @media (min-width:769px) {
            .box-shortcut {
                top: 50%;
                margin-top: -5rem
            }
        }