.valign-table{ display: table; width: 100%; height: 100%; } .valign-row{ display: table-row; } .valign-cell{ display: table-cell; height: 100%; vertical-align: middle; } body.page-template-biographie, body.page-template-biographie > main, #biographie .biographie main{ background-color: #e6e3cf !important; } #biographie .biographie main .bio-head{ position: relative; padding-top: 160px; margin-bottom: -60px; } #biographie .biographie main .bio-head .wrapper{ max-width: 60%; text-align: right; margin: 0 auto; } #biographie .biographie main .bio-head img.portrait{ width: auto; height: auto; position: absolute; left: 0; top: 0; } #biographie .biographie main .bio-head h1{ font-size: 160px; line-height: 170px; font-family: 'Playfair Display', serif; font-weight: 700; color: #FFF; text-transform: uppercase; max-width: 100%; text-align: right; display: block; margin: 0 auto; position: relative; z-index: 1; min-height: 810px; } #biographie .biographie main .bio-head h1 span{ padding-right: 19%; } /*Draw the line when loaded*/ #biographie .biographie main .bio-head h1:before{ content: ''; background-color: #d23431; width: 40vw; height: 1px; display: inline-block; position: absolute; top: 310px; left: 540px; transform: rotate(-64deg) scaleX(0); z-index: -1; transition: all 0.5s ease-out; } .header-visible #biographie .biographie main .bio-head h1:before{ transform: rotate(-64deg) scaleX(1); } .header-visible.show-loader #biographie .biographie main .bio-head h1:before{ transform: rotate(-64deg) scaleX(0); } #biographie .biographie main .bio-head img.famille{ position: relative; top: -160px; left: -70px; max-width: 275px; } #biographie .biographie main .bio-head .wrapper p.dates{ font-family: 'Prestige Elite Std Bold', monospace; font-size: 24px; line-height: 26px; font-weight: 400; font-style: normal; display: inline-block; padding-right: 350px; padding-top: 130px; vertical-align: top; } #biographie .biographie main .bio-head .wrapper p.dates span{ display: inline-block; width: 50px; position: relative; } #biographie .biographie main .bio-head .wrapper p.dates span:before{ display: inline-block; width: 46px; height: 1px; background-color: #000; position: absolute; left: 2px; bottom: 7px; content: ''; } .titre-vertical{ font-size: 20px; line-height: 24px; color: #000; text-transform: uppercase; font-family: 'Prestige Elite Std Bold', monospace; position: absolute; left: -90px; top: 185px; transform: rotate(-90deg); } .titre-vertical span.dash{ position: relative; top: -5px; display: inline-block; background-color: #000; height: 1px; width: 45px; } #biographie .biographie main .bio-jeune{ position: relative; display: block; max-width: 100%; margin: 0 auto; } #biographie .biographie main .bio-jeune .wrapper{ display: block; max-width: 1530px; margin: 0 auto; } #biographie .biographie main .bio-jeune *{ box-sizing: border-box; } #biographie .biographie main .bio-jeune .left, #biographie .biographie main .bio-jeune .right{ display: inline-block; float: left; width: 50%; margin: 0; padding: 0 45px; } #biographie .biographie main .bio-jeune .right{ padding-right: 0; } #biographie .biographie main .bio-jeune h3{ font-family: 'Playfair Display', serif; font-size: 84px; line-height: 84px; padding-left: 45px; margin-bottom: 50px; font-weight: 400; } #biographie .biographie main .bio-jeune p{ font-family: 'Nunito', serif; font-size: 20px; line-height: 30px; margin-bottom: 20px; font-weight: 300; color: #333; } #biographie .biographie main .bio-jeune .text .signature{ text-align: right; padding-right: 85px; } #biographie .biographie main .bio-jeune .text .signature img{ width: 220px; } #biographie .biographie main .bio-lepeintre{ text-align: center; } #biographie .biographie main .bio-lepeintre *{ box-sizing: border-box; } /*Debutant*/ #biographie .biographie main .bio-lepeintre .debutant{ margin-bottom: 160px; } #biographie .biographie main .bio-lepeintre .debutant .wrapper{ display: block; max-width: 1530px; margin: 0 auto 90px; padding: 0 2%;} #biographie .biographie main .bio-lepeintre h2{ font-family: 'Playfair Display', serif; font-size: 220px; line-height: 220px; color: #f5f2e2; text-transform: uppercase; display: inline-block; margin: 0 0 60px 0; font-weight: 400; letter-spacing: 34px; white-space: nowrap; } #biographie .biographie main .bio-lepeintre .debutant .left h3{ font-family: 'Playfair Display', serif; font-size: 100px; line-height: 116px; font-weight: 400; text-transform: uppercase; color: #e00000; } #biographie .biographie main .bio-lepeintre .debutant p{ font-family: 'Nunito', serif; font-size: 20px; line-height: 30px; margin-bottom: 20px; font-weight: 300; } #biographie .biographie main .bio-lepeintre .debutant .left, #biographie .biographie main .bio-lepeintre .debutant .right{ display: inline-block; width: 50%; margin: 0; float: left; text-align: left; padding-left: 150px; } #biographie .biographie main .bio-lepeintre .debutant .left{ text-align: right; padding-left: 0; padding-right: 150px; z-index: 3; position: relative; } #biographie .biographie main .bio-lepeintre .debutant .right{ padding-top: 95px; } /*Dates*/ #biographie .biographie main .bio-lepeintre .dates{ text-align: left; position: relative; } #biographie .biographie main .bio-lepeintre .debutant .dates{ left: 60px; } #biographie .biographie main .bio-lepeintre .debutant .dates p, #biographie .biographie main .bio-lepeintre .amerique .dates p, #biographie .biographie main .bio-lepeintre .oeuvre .dates p{ font-family: 'Playfair Display', serif; font-size: 48px; line-height: 48px; font-weight: 400; font-style: normal; display: inline-block; padding-right: 0; color: #6f6f6f; } #biographie .biographie main .bio-lepeintre .dates p span{ display: inline-block; width: 50px; position: relative; } #biographie .biographie main .bio-lepeintre .dates p span:before{ display: inline-block; width: 46px; height: 1px; background-color: #6f6f6f; position: absolute; left: 2px; bottom: 7px; content: ''; } /*Oeuvre*/ #biographie .biographie main .bio-lepeintre .oeuvre .wrapper{ display: block; max-width: 1530px; margin: 0 auto 130px; padding: 0 2%;} #biographie .biographie main .bio-lepeintre h2.titre-oeuvre{ font-family: 'Playfair Display', serif; font-size: 220px; line-height: 220px; color: #f5f2e2; text-transform: uppercase; display: inline-block; margin: 0 0 60px 0; font-weight: 400; letter-spacing: 34px; white-space: nowrap; text-align: right; } #biographie .biographie main .bio-lepeintre .oeuvre .right h3{ font-family: 'Playfair Display', serif; font-size: 100px; line-height: 116px; font-weight: 400; text-transform: uppercase; color: #e00000; } #biographie .biographie main .bio-lepeintre .oeuvre p{ font-family: 'Nunito', serif; font-size: 20px; line-height: 30px; margin-bottom: 20px; font-weight: 300; } #biographie .biographie main .bio-lepeintre .oeuvre .left, #biographie .biographie main .bio-lepeintre .oeuvre .right{ display: inline-block; width: 50%; margin: 0; float: left; float: right; text-align: left; padding-left: 150px; } #biographie .biographie main .bio-lepeintre .oeuvre .right{ position: relative; z-index: 3; } #biographie .biographie main .bio-lepeintre .oeuvre .left{ padding-left: 0; padding-right: 150px; padding-top: 30px; } #biographie .biographie main .bio-lepeintre .oeuvre .img-centerer{ top: 55px; left: calc(63% - 240px); } /*Slider*/ #biographie .biographie main .bio-lepeintre .sliding{ padding-top: 10vh; } #biographie .biographie main .bio-lepeintre .sliding .text{ position: absolute; width: 100%; } #biographie .biographie main .bio-lepeintre .sliding p{ font-family: 'Playfair Display', serif; color: #282828; font-size: 40px; line-height: 54px; font-weight: 400; text-align: center; } #biographie .biographie main .bio-lepeintre .sliding p b{ font-weight: 700; position: relative; z-index: 1; } #biographie .biographie main .bio-lepeintre .sliding p b:before{ content: ''; background-color: #f5f2e2; display: block; width: calc(100% + 8px); height: 20px; position: absolute; left: -4px; bottom: 0; z-index: -1; } #biographie .biographie main .bio-lepeintre .sliding .slidr{ height: 820px; position: relative; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper{ position: relative; width: auto; padding-left: 170px; text-align: left; position: absolute; left: 0; top: 0; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper > div{ margin-right: 145px; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper .img{ background-color: #FFF; padding: 47px; display: inline-block; width: auto; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper .img img{ max-width: 450px; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper .txt{ max-width: 440px; color: #282828; display: inline-block; text-align: left; vertical-align: top; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper .txt h4{ font-family: 'Playfair Display', serif; font-size: 34px; line-height: 30px; margin-bottom: 24px; font-weight: 300; position: relative; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper .txt p{ font-family: 'Nunito', serif; font-size: 18px; line-height: 28px; text-align: left; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper .txt h4:before{ position: absolute; left: -40px; top: -198px; font-size: 270px; line-height: 270px; color: rgba(40,40,40,0.1); font-family: 'Playfair Display', serif; font-weight: bold; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper .txtpos1{ margin-top: 125px; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper .txtpos2{ margin-top: 350px; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper .txtpos3{ margin-top: 500px; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper .imgpos2{ margin-left: -250px; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper .txt1 h4:before{ content: '1'; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper .txt2 h4:before{ content: '2'; top: -167px; left: -42px; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper .txt3 h4:before{ content: '3'; top: -178px; left: -58px; } /*#biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper .txt4 h4:before{ content: '4'; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper .txt5 h4:before{ content: '5'; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper .txt6 h4:before{ content: '6'; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper .txt7 h4:before{ content: '7'; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper .txt8 h4:before{ content: '8'; }*/ #biographie .biographie main .bio-lepeintre .sliding #wrapperBoxes{ position: absolute; width: 4140px; height: 550px; margin-top: 25vh; } #biographie .biographie main .bio-lepeintre .sliding .box{ position: relative; } .scrollbar-track-x{ display: none!important; } /*Citation*/ #biographie .biographie main .bio-lepeintre .citation{ text-align: left; vertical-align: top; margin-bottom: 150px; } #biographie .biographie main .bio-lepeintre .citation .img{ display: inline-block; vertical-align: top; } #biographie .biographie main .bio-lepeintre .citation .img img{ width: 748px; } #biographie .biographie main .bio-lepeintre .citation .text{ display: inline-block; width: 870px; vertical-align: top; padding-top: 200px; position: relative; left: -120px; } #biographie .biographie main .bio-lepeintre .citation .text .align-right{ text-align: right; display: block; } #biographie .biographie main .bio-lepeintre .citation .text p{ font-size: 77px; line-height: 115px; color: #282828; font-family: 'Playfair Display', serif; font-style: italic; position: relative; vertical-align: top; } #biographie .biographie main .bio-lepeintre .citation .text p:before{ content: '“'; font-family: 'Playfair Display', serif; font-weight: bold; font-size: 410px; line-height: 200px; position: absolute; left: -160px; top: -100px; color: #FFF; font-style: normal; } /*Amerique*/ #biographie .biographie main .bio-lepeintre .amerique .wrapper{ display: block; max-width: 1530px; margin: 0 auto; } #biographie .biographie main .bio-lepeintre h2.titre-amerique{ font-family: 'Playfair Display', serif; font-size: 220px; line-height: 220px; color: #f5f2e2; text-transform: uppercase; display: inline-block; margin: 0 0 60px 0; font-weight: 400; letter-spacing: 34px; white-space: nowrap; text-align: left; } #biographie .biographie main .bio-lepeintre .amerique .left h3{ font-family: 'Playfair Display', serif; font-size: 100px; line-height: 116px; font-weight: 400; text-transform: uppercase; color: #e00000; } #biographie .biographie main .bio-lepeintre .amerique p{ font-family: 'Nunito', serif; font-size: 20px; line-height: 30px; margin-bottom: 20px; font-weight: 300; } #biographie .biographie main .bio-lepeintre .amerique .left, #biographie .biographie main .bio-lepeintre .amerique .right{ display: inline-block; width: 50%; margin: 0; float: left; text-align: left; padding-left: 150px; } #biographie .biographie main .bio-lepeintre .amerique .right{ padding-top: 95px; } #biographie .biographie main .bio-lepeintre .amerique .left{ text-align: right; padding-left: 0; padding-right: 150px; position: relative; z-index: 3; } #biographie .biographie main .bio-lepeintre .wrapper{ position: relative; } #biographie .biographie main .bio-lepeintre .img-centerer{ position: absolute; left: calc(36% - 240px); top: 130px; width: 480px; height: auto; z-index: 2; } #biographie .biographie main .bio-lepeintre .img-centerer img{ display: block; width: auto; height: auto; } #biographie .biographie main .bio-lepeintre .img-centerer img.max265{ max-width: 265px; } #biographie .biographie main .bio-lepeintre .img-centerer img.max300{ max-width: 300px; } #biographie .biographie main .bio-lepeintre .img-centerer img.max400{ max-width: 400px; } #biographie .biographie main .bio-lepeintre .img-centerer img.max440{ max-width: 440px; } #biographie .biographie main .bio-lepeintre .img-centerer img.max500{ max-width: 500px; } #biographie .biographie main .bio-lepeintre .img-centerer img.max560{ max-width: 560px; } #biographie .biographie main .bio-lepeintre .img-centerer img.max600{ max-width: 600px; } #biographie .biographie main .bio-lepeintre .img-centerer img.max620{ max-width: 620px; } #biographie .biographie main .bio-lepeintre .debutant .wrapper .img-centerer img:nth-child(1){ margin: 0 0 50px auto; } #biographie .biographie main .bio-lepeintre .debutant .wrapper .img-centerer img:nth-child(2){ margin: -50px auto 0; } #biographie .biographie main .bio-lepeintre .debutant .wrapper .img-centerer img:nth-child(3){ margin: -20px auto 0 25px; } #biographie .biographie main .bio-lepeintre .amerique{ margin-bottom: 110px; } #biographie .biographie main .bio-lepeintre .amerique .wrapper .img-centerer{ width: 810px; left: calc(36% - 505px); padding-top: 95px; } #biographie .biographie main .bio-lepeintre .amerique .wrapper .img-centerer img{ width: auto; } #biographie .biographie main .bio-lepeintre .amerique .wrapper .img-centerer img:nth-child(1){ margin: 0 auto; } #biographie .biographie main .bio-lepeintre .amerique .wrapper .img-centerer img:nth-child(2){ margin: -5px auto 0; } #biographie .biographie main .bio-lepeintre .amerique .wrapper .img-centerer img:nth-child(3){ margin: -25px auto 0; } #biographie .biographie main .bio-lepeintre .amerique .wrapper .img-centerer img:nth-child(4){ margin: -20px auto 0; } /*HOMMAGES*/ #biographie .biographie main .bio-lepeintre .hommages .wrapper{ position: relative; } #biographie .biographie main .bio-lepeintre .hommages .wrapper .sliding{ max-width: 1030px; padding-top: 16vh; margin: 0 auto; padding-bottom: 12vh; position: relative; } #biographie .biographie main .bio-lepeintre .hommages .wrapper h3.flying-text{ color: rgba(40,40,40,0.1); font-size: 290px; line-height: 290px; font-family: 'Playfair Display', serif; position: absolute; top: -150px; width: 100%; font-weight: 300; } #biographie .biographie main .bio-lepeintre .hommages .wrapper .sliding .text p{font-size: 45px; line-height: 68px; font-family: 'Nunito', serif; } #biographie .biographie main .bio-lepeintre .hommages .wrapper .hommagestabs{ position: relative; padding: 120px 0 30px; } #biographie .biographie main .bio-lepeintre .hommages .wrapper .hommagestabs:before{ content: ''; width: 88%; height: 1px; background-color: #b3b09f; position: absolute; top: 0; left: 0; } #biographie .biographie main .bio-lepeintre .hommages .sliding .text{ margin-bottom: 180px; top: 0; } #biographie .biographie main .bio-lepeintre .hommages .wrapper .hommagestabs .titres{ text-align: center; margin: 0 auto 90px; } #biographie .biographie main .bio-lepeintre .hommages .wrapper .hommagestabs .titres .titre{ height: 52px; text-align: left; display: inline-block; margin-right: 34px; padding-left: 22px; position: relative; max-width: 210px; cursor: pointer; } #biographie .biographie main .bio-lepeintre .hommages .wrapper .hommagestabs .titres .titre:before{ content:''; display: inline-block; height: 44px; width: 7px; /*background-color: #c4c1ad;*/ position: absolute; left: 0; top: 4px; background: linear-gradient(to top, #bc0a0a 50%, #c4c1ad 50%); background-size: 100% 200%; background-position: right top; transition: all .5s ease-out; } #biographie .biographie main .bio-lepeintre .hommages .wrapper .hommagestabs .titres .titre.active:before{ /*background-color: #bc0a0a;*/ background-position: right bottom; } #biographie .biographie main .bio-lepeintre .hommages .wrapper .hommagestabs .titres .titre p{ font-family: 'Jost', serif; font-weight: 500; font-size: 13px; line-height: 16px; text-transform: uppercase; margin-bottom: 0; cursor: pointer; } #biographie .biographie main .bio-lepeintre .hommages .wrapper .hommagestabs .textes{ max-width: 650px; margin: 0 auto; text-align: left; } #biographie .biographie main .bio-lepeintre .hommages .wrapper .hommagestabs .textes .texte{ display: none; } #biographie .biographie main .bio-lepeintre .hommages .wrapper .hommagestabs .textes .texte.active{ display: block; } #biographie .biographie main .bio-lepeintre .hommages .wrapper .hommagestabs .textes .texte p{ font-family: 'Nunito', serif; font-weight: 300; padding-bottom: 10px; margin-bottom: 0; } #biographie .biographie main .bio-lepeintre .affix .titre-fix{ position: relative; transition: top 0.1s linear; width: 100%; } .img-appear{ opacity: 0.01; -webkit-transition: translateY(80px) translateZ(50px); transform: translateY(80px) translateZ(50px); transform-origin: 50% 0; will-change: transform; filter: blur(5px); } .titre-vertical{ display: none; } .vertical-title { display: flex; justify-content: space-between; align-items: center; opacity: 0; width: auto; min-width: 346px; height: 30px; position: fixed; bottom: 278px; left: 80px; font-size: 18px; color: #000; z-index: 3; transform: translateX(-50%) rotate(-90deg); pointer-events: none; font-size: 16px; line-height: 24px; color: #000; text-transform: uppercase; font-family: 'Jost', monospace; } .vertical-title .page-name { height: 100%; } .vertical-title .line{ position: relative; top: -4px; margin: 0 9px; display: inline-block; background-color: #000; height: 1px; width: 45px; } .vertical-title .section-names { height: 34px; width: 271px; position: relative; overflow: hidden; } .vertical-title .section-names .section-names-inner { position: absolute; top: -2px; left: 4px; } .vertical-title .section-names .section-names-inner .section-name { /* margin: 5px auto; */ margin: 0 auto; height: 34px; line-height: 34px; } /* Texte défilant */ .defileParent { display: block; margin: 3em auto; overflow: hidden; position: relative; table-layout: fixed; width: 3150px; } .defileParent.peintre { width: 3150px; } .defileParent.oeuvre { width: 2777px; } .defileParent.amerique { width: 3600px; } .defile { display:block; -webkit-animation:linear marqueelike 14s infinite ; -moz-animation:linear marqueelike 14s infinite ; -o-animation:linear marqueelike 14s infinite ; -ms-animation:linear marqueelike 14s infinite ; animation:linear marqueelike 14s infinite ; margin-left:-100%; padding:0 5px; text-align:left; height:auto; } .defileReverse { display:block; -webkit-animation:linear marqueelikereverse 14s infinite ; -moz-animation:linear marqueelikereverse 14s infinite ; -o-animation:linear marqueelikereverse 14s infinite ; -ms-animation:linear marqueelikereverse 14s infinite ; animation:linear marqueelikereverse 14s infinite ; /*margin-right:-100%;*/ margin-left: -200%; padding:0 5px; text-align:right; height:auto; } .defile h2, .defileReverse h2{ padding-left: 100px; } .defile:after, .defileReverse:before { content:attr(data-text); position:absolute; white-space:nowrap; padding-left:100px; font-family: 'Playfair Display', serif; font-size: 220px; line-height: 220px; color: #f5f2e2; text-transform: uppercase; display: inline-block; margin: 0 0 60px 0; font-weight: 400; letter-spacing: 34px; white-space: nowrap; text-align: right; } .defileReverse:before{ display: inline-block; position: relative; } @-webkit-keyframes marqueelike { 0%, 100% {margin-left:0;} 99.99% {margin-left:-100%;} } @-moz-keyframes marqueelike { 0%, 100% {margin-left:0;} 99.99% {margin-left:-100%;} } @-o-keyframes marqueelike { 0%, 100% {margin-left:0;} 99.99% {margin-left:-100%;} } @-ms-keyframes marqueelike { 0%, 100% {margin-left:0;} 99.99% {margin-left:-100%;} } @keyframes marqueelike { 0%, 100% {margin-left:0;} 99.99% {margin-left:-100%;} } @-webkit-keyframes marqueelikereverse { 0%, 100% {margin-right:0;} 99.99% {margin-right:-100%;} } @-moz-keyframes marqueelikereverse { 0%, 100% {margin-right:0;} 99.99% {margin-right:-100%;} } @-o-keyframes marqueelikereverse { 0%, 100% {margin-right:0;} 99.99% {margin-right:-100%;} } @-ms-keyframes marqueelikereverse { 0%, 100% {margin-right:0;} 99.99% {margin-right:-100%;} } @keyframes marqueelikereverse { 0%, 100% {margin-right:0;} 99.99% {margin-right:-100%;} } footer { background: #E6E3CF; } @media only screen and (max-width: 860px) { .defileParent { display: block; margin: 3em auto; overflow: hidden; position: relative; table-layout: fixed; width: 100%; } .defile { display:block; -webkit-animation:linear marqueelike 12s infinite ; -moz-animation:linear marqueelike 12s infinite ; -o-animation:linear marqueelike 12s infinite ; -ms-animation:linear marqueelike 12s infinite ; animation:linear marqueelike 12s infinite ; margin-left:-100%; padding:0 5px; text-align:left; height:auto; } } /*RESPONSIVE*/ @media screen and (max-width:1840px){ } @media screen and (max-width:1660px){ #biographie .biographie main .bio-head{ padding-top: 130px; margin-bottom: -30px; } #biographie .biographie main .bio-head img.portrait{ max-width: 88%; left: -210px } #biographie .biographie main .bio-head h1{ font-size: 130px; line-height: 140px; min-height: 620px; } #biographie .biographie main .bio-head h1:before{ width: 40vw; top: 230px; left: 378px; } #biographie .biographie main .bio-head img.famille{ width: 260px; top: -100px; left: 20px; } .titre-vertical{ left: -140px; } #biographie .biographie main .bio-jeune .wrapper, #biographie .biographie main .bio-lepeintre .debutant .wrapper, #biographie .biographie main .bio-lepeintre .oeuvre .wrapper, #biographie .biographie main .bio-lepeintre .amerique .wrapper{ max-width: 1180px; } #biographie .biographie main .bio-lepeintre .citation .img img{ width: 600px; } #biographie .biographie main .bio-lepeintre .citation .text{ width: 600px; padding-top: 160px; left: -100px; } #biographie .biographie main .bio-lepeintre .citation .text p{ font-size: 52px; line-height: 84px; } #biographie .biographie main .bio-lepeintre .citation .text p:before{ font-size: 360px; left: -140px; } #biographie .biographie main .bio-lepeintre .debutant .left h3, #biographie .biographie main .bio-lepeintre .oeuvre .right h3, #biographie .biographie main .bio-lepeintre .amerique .left h3{ font-size: 74px; line-height: 84px; } #biographie .biographie main .bio-lepeintre .debutant .dates p, #biographie .biographie main .bio-lepeintre .amerique .dates p, #biographie .biographie main .bio-lepeintre .oeuvre .dates p{ font-size: 38px; line-height: 38px; margin-bottom: 4px; } #biographie .biographie main .bio-jeune p, #biographie .biographie main .bio-lepeintre .debutant p, #biographie .biographie main .bio-lepeintre .oeuvre p, #biographie .biographie main .bio-lepeintre .amerique p{ font-size: 18px; line-height: 28px; } #biographie .biographie main .bio-lepeintre .amerique .right, #biographie .biographie main .bio-lepeintre .debutant .right{ padding-left: 80px; } #biographie .biographie main .bio-lepeintre .oeuvre .left{ padding-right: 80px; } #biographie .biographie main .bio-lepeintre .sliding p{ font-size: 34px; line-height: 50px; } #biographie .biographie main .bio-lepeintre .sliding .slidr{ height: 750px; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper{ padding-left: 140px; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper .img{ padding: 17px; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper .img img{ width: 370px; } .vertical-title{ left: 50px; } #biographie .biographie main .bio-lepeintre .img-centerer{ left: calc(30% - 240px); } #biographie .biographie main .bio-lepeintre .oeuvre .img-centerer{ left: calc(74% - 240px); } #biographie .biographie main .bio-lepeintre .amerique .wrapper .img-centerer{ left: calc(32% - 505px); } #biographie .biographie main .bio-lepeintre .img-centerer img.max400{ max-width: calc(400px * 0.75); } #biographie .biographie main .bio-lepeintre .img-centerer img.max500{ max-width: calc(500px * 0.75); } #biographie .biographie main .bio-lepeintre .img-centerer img.max560{ max-width: calc(560px * 0.75); } #biographie .biographie main .bio-lepeintre .img-centerer img.max600{ max-width: calc(600px * 0.75); } #biographie .biographie main .bio-lepeintre .img-centerer img.max620{ max-width: calc(620px * 0.75); } #biographie .biographie main .bio-lepeintre .hommages .wrapper .hommagestabs .textes .texte p{ line-height: 22px; } #biographie .biographie main .bio-lepeintre .amerique{ margin-bottom: 140px; } #biographie .biographie main .bio-lepeintre .hommages .sliding .text{ margin-bottom: 110px; } } @media screen and (max-width:1365px){ #biographie .biographie main .bio-head{ margin-bottom: -230px; } #biographie .biographie main .bio-head{ padding-top: 170px; } #biographie .biographie main .bio-head img.portrait{ max-width: 94%; left: -270px; } #biographie .biographie main .bio-head img.famille{ width: 230px; left: 20px; top: -290px; } #biographie .biographie main .bio-head h1:before{ left: 338px; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper .img{ padding: 17px; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper .img img{ width: 355px; } #biographie .biographie main .bio-lepeintre .sliding #wrapperBoxes{ width: 3540px; margin-top: 30vh; height: 400px; } #biographie .biographie main .bio-jeune p, #biographie .biographie main .bio-lepeintre .debutant p, #biographie .biographie main .bio-lepeintre .oeuvre p, #biographie .biographie main .bio-lepeintre .amerique p{ font-size: 16px; line-height: 26px; } #biographie .biographie main .bio-jeune .wrapper, #biographie .biographie main .bio-lepeintre .debutant .wrapper, #biographie .biographie main .bio-lepeintre .oeuvre .wrapper, #biographie .biographie main .bio-lepeintre .amerique .wrapper{ max-width: 1020px; } #biographie .biographie main .bio-lepeintre .img-centerer img.max265{ max-width: calc(265px * 0.85); } #biographie .biographie main .bio-lepeintre .img-centerer img.max300{ max-width: calc(300px * 0.9); } #biographie .biographie main .bio-lepeintre .img-centerer img.max400{ max-width: calc(400px * 0.8); } #biographie .biographie main .bio-lepeintre .img-centerer img.max440{ max-width: calc(440px * 0.8); } #biographie .biographie main .bio-lepeintre .img-centerer img.max500{ max-width: calc(500px * 0.75); } #biographie .biographie main .bio-lepeintre .img-centerer img.max560{ max-width: calc(560px * 0.75); } #biographie .biographie main .bio-lepeintre .img-centerer img.max600{ max-width: calc(600px * 0.75); } #biographie .biographie main .bio-lepeintre .img-centerer img.max620{ max-width: calc(620px * 0.75); } #biographie .biographie main .bio-lepeintre .debutant .left h3, #biographie .biographie main .bio-lepeintre .oeuvre .right h3, #biographie .biographie main .bio-lepeintre .amerique .left h3{ font-size: 60px; line-height: 76px; } #biographie .biographie main .bio-lepeintre .debutant .dates{ left: 30px; } #biographie .biographie main .bio-lepeintre .amerique .dates{ left: 19px; } #biographie .biographie main .bio-lepeintre .hommages .wrapper .sliding{ max-width: 800px; } #biographie .biographie main .bio-lepeintre .hommages .wrapper .sliding .text p{ font-size: 35px; line-height: 48px; } #biographie .biographie main .bio-lepeintre .hommages .wrapper h3.flying-text{ font-size: 220px; line-height: 260px; } } @media screen and (max-width:1279px){ .vertical-title{ left: 45px; bottom: 248px; } #biographie .biographie main .bio-head .wrapper{ text-align: left; } #biographie .biographie main .bio-head h1{ font-size: 140px; line-height: 140px; min-height: 572px; } #biographie .biographie main .bio-head h1:before{ width: 77vw; top: 350px; left: 80px; } #biographie .biographie main .bio-head img.famille{ top: -90px; left: 230px; } #biographie .biographie main .bio-jeune .wrapper, #biographie .biographie main .bio-lepeintre .debutant .wrapper, #biographie .biographie main .bio-lepeintre .oeuvre .wrapper, #biographie .biographie main .bio-lepeintre .amerique .wrapper{ max-width: 820px; } #biographie .biographie main .bio-jeune h3{ font-size: 74px; line-height: 74px; margin-bottom: 40px; } #biographie .biographie main .bio-lepeintre .debutant .left h3, #biographie .biographie main .bio-lepeintre .oeuvre .right h3, #biographie .biographie main .bio-lepeintre .amerique .left h3{ font-size: 42px; line-height: 46px; } #biographie .biographie main .bio-lepeintre .debutant .dates p, #biographie .biographie main .bio-lepeintre .amerique .dates p, #biographie .biographie main .bio-lepeintre .oeuvre .dates p{ font-size: 28px; line-height: 28px; } #biographie .biographie main .bio-lepeintre .oeuvre .left{ padding-right: 15px; } #biographie .biographie main .bio-lepeintre .amerique .right, #biographie .biographie main .bio-lepeintre .debutant .right{ padding-left: 30px; } #biographie .biographie main .bio-lepeintre .sliding .text{ max-width: 900px; margin: 0 auto; } #biographie .biographie main .bio-lepeintre .sliding p{ font-size: 26px; line-height: 42px; } #biographie .biographie main .bio-lepeintre .sliding .slidr{ height: 650px; } #biographie .biographie main .bio-lepeintre .citation .img img{ width: 500px; } #biographie .biographie main .bio-lepeintre .citation .text{ width: 500px; } #biographie .biographie main .bio-lepeintre .citation .text p{ font-size: 38px; line-height: 66px; } #biographie .biographie main .bio-lepeintre .citation .text p:before{ font-size: 250px; left: -90px; } #biographie .biographie main .bio-lepeintre .amerique .wrapper .img-centerer{ width: 390px; left: calc(50% - 435px); } #biographie .biographie main .bio-lepeintre .img-centerer img.max265{ max-width: calc(265px * 0.7); } #biographie .biographie main .bio-lepeintre .img-centerer img.max300{ max-width: calc(300px * 0.7); } #biographie .biographie main .bio-lepeintre .img-centerer img.max400{ max-width: calc(400px * 0.7); } #biographie .biographie main .bio-lepeintre .img-centerer img.max440{ max-width: calc(440px * 0.7); } #biographie .biographie main .bio-lepeintre .img-centerer img.max620{ max-width: calc(620px * 0.7); } #biographie .biographie main .bio-head img.portrait{ max-width: 113%; left: -340px; } #biographie .biographie main .bio-head img.famille{ top: -240px; left: 470px; } #biographie .biographie main .bio-lepeintre .img-centerer{ width: 400px; left: calc(30% - 280px); } #biographie .biographie main .bio-lepeintre .oeuvre .img-centerer{ left: calc(91% - 240px); } #biographie .biographie main .bio-lepeintre .img-centerer img.max500{ max-width: calc(500px * 0.65); } #biographie .biographie main .bio-lepeintre .img-centerer img.max560{ max-width: calc(560px * 0.65); } #biographie .biographie main .bio-lepeintre .img-centerer img.max600{ max-width: calc(600px * 0.65); } #biographie .biographie main .bio-lepeintre .img-centerer img.max620{ max-width: calc(620px * 0.65); } #biographie .biographie main .bio-lepeintre .amerique .wrapper .img-centerer img:nth-child(1){ margin: 0 auto; } #biographie .biographie main .bio-lepeintre .amerique .wrapper .img-centerer img:nth-child(2){ margin: -45px auto 0; } #biographie .biographie main .bio-lepeintre .amerique .wrapper .img-centerer img:nth-child(3){ margin: -35px auto 0; } #biographie .biographie main .bio-lepeintre .amerique .wrapper .img-centerer img:nth-child(4){ margin: -80px auto 0; } #biographie .biographie main .bio-lepeintre .hommages .wrapper h3.flying-text{ font-size: 180px; line-height: 260px; } #biographie .biographie main .bio-lepeintre .hommages .wrapper .hommagestabs .titres .titre:before{ top: 2px; } } @media screen and (max-width:1200px){ } @media screen and (max-width:1100px){ } @media screen and (max-width:1023px){ #biographie .biographie main .bio-head img.portrait{ left: -300px; max-width: 110%; } .vertical-title{ left: 35px; } #biographie .biographie main .bio-head{ padding-top: 100px; margin-bottom: -120px; } #biographie .biographie main .bio-head img.famille{ width: 240px; left: 280px; top: -210px; } #biographie .biographie main .bio-head h1{ font-size: 110px; line-height: 110px; min-height: 370px; } #biographie .biographie main .bio-head h1:before{ top: 240px; left: 70px; } #biographie .biographie main .bio-head .wrapper p.dates{ padding-right: 80px; padding-top: 160px; } #biographie .biographie main .bio-lepeintre .citation .img img{ width: 350px; } #biographie .biographie main .bio-lepeintre .citation .text p{ font-size: 34px; line-height: 56px; } #biographie .biographie main .bio-jeune .left, #biographie .biographie main .bio-jeune .right{ width: 49%; } #biographie .biographie main .bio-jeune .wrapper, #biographie .biographie main .bio-lepeintre .debutant .wrapper, #biographie .biographie main .bio-lepeintre .oeuvre .wrapper, #biographie .biographie main .bio-lepeintre .amerique .wrapper{ max-width: 680px; } #biographie .biographie main .bio-jeune .left, #biographie .biographie main .bio-jeune .right{ padding: 0 40px; } #biographie .biographie main .bio-jeune .left{ padding-right: 0; } #biographie .biographie main .bio-lepeintre .debutant .left{ padding-right: 77px; } #biographie .biographie main .bio-lepeintre .debutant .wrapper .img-centerer img:nth-child(1){ margin: 120px auto 50px; } #biographie .biographie main .bio-lepeintre .oeuvre .left{ padding: 0 0 0 40px; } #biographie .biographie main .bio-lepeintre .debutant .left{ padding-right: 90px; } #biographie .biographie main .bio-lepeintre .img-centerer{ left: calc(30% - 220px); } #biographie .biographie main .bio-lepeintre .sliding p{ font-size: 18px; line-height: 34px; } #biographie .biographie main .bio-lepeintre .citation .text{ width: 400px; padding-top: 110px; } #biographie .biographie main .bio-lepeintre .amerique .left{ padding-right: 82px; } #biographie .biographie main .bio-lepeintre .img-centerer img.max500{ max-width: calc(500px * 0.55); } #biographie .biographie main .bio-lepeintre .img-centerer img.max560{ max-width: calc(560px * 0.5); } #biographie .biographie main .bio-lepeintre .img-centerer img.max600{ max-width: calc(600px * 0.5); } #biographie .biographie main .bio-lepeintre .img-centerer img.max620{ max-width: calc(620px * 0.5); } #biographie .biographie main .bio-lepeintre .amerique .wrapper .img-centerer{ left: calc(50% - 345px); } #biographie .biographie main .bio-lepeintre .hommages .wrapper .sliding{ max-width: 580px; } #biographie .biographie main .bio-lepeintre .hommages .wrapper .sliding .text p{ font-size: 26px; line-height: 38px; } #biographie .biographie main .bio-lepeintre .hommages .wrapper h3.flying-text{ font-size: 130px; line-height: 270px; } #biographie .biographie main .bio-lepeintre .hommages .sliding .text{ margin-bottom: 60px; } #biographie .biographie main .bio-lepeintre .hommages .wrapper .hommagestabs{ padding-top: 70px; } #biographie .biographie main .bio-lepeintre .hommages .wrapper .hommagestabs .titres .titre{ max-width: 148px; margin-right: 14px; } #biographie .biographie main .bio-lepeintre .hommages .wrapper .hommagestabs .titres .titre p{ font-size: 10px; line-height: 16px; } #biographie .biographie main .bio-lepeintre .hommages .wrapper .hommagestabs .textes .texte p{ line-height: 20px; font-size: 14px; } } @media screen and (max-width:767px){ .vertical-title{ display: none; visibility: hidden; } #biographie .biographie main .bio-head{ margin-bottom: 30px; } #biographie .biographie main .bio-head img.portrait{ top: 78px; max-width: 100%; left: 0; } #biographie .biographie main .bio-head h1{ font-size: 60px; line-height: 66px; min-height: 220px; } #biographie .biographie main .bio-head .wrapper{ max-width: 100%; padding: 0 35px; } #biographie .biographie main .bio-head h1:before{ display: none; } #biographie .biographie main .bio-head .wrapper p.dates{ padding-top: 60px; } #biographie .biographie main .bio-head img.famille{ display: none; visibility: hidden; } #biographie .biographie main .bio-jeune .left, #biographie .biographie main .bio-jeune .right{ padding: 0 35px; width: 100%; float: none; } #biographie .biographie main .bio-jeune h3{ margin-bottom: 10px; padding: 0 35px; } .defileParent{ left: -600px; transform: scale(0.7); } #biographie .biographie main .bio-lepeintre .debutant{ margin-bottom: 0; } #biographie .biographie main .bio-lepeintre .debutant .left, #biographie .biographie main .bio-lepeintre .debutant .right{ float: none; display: block; margin: 0 auto; padding: 0 35px; width: 100%; } #biographie .biographie main .bio-lepeintre .debutant .dates{ left: 0; } #biographie .biographie main .bio-lepeintre .debutant .left h3, #biographie .biographie main .bio-lepeintre .oeuvre .right h3, #biographie .biographie main .bio-lepeintre .amerique .left h3{ font-size: 44px; line-height: 52px; margin: 20px 0 10px; } #biographie .biographie main .bio-lepeintre .affix .titre-fix{ position: relative !important; top: 0 !important; max-width: 100% !important; } #biographie .biographie main .bio-lepeintre .img-centerer, #biographie .biographie main .bio-lepeintre .debutant .wrapper .img-centerer, #biographie .biographie main .bio-lepeintre .amerique .wrapper .img-centerer, #biographie .biographie main .bio-lepeintre .img-centerer img, #biographie .biographie main .bio-lepeintre .debutant .wrapper .img-centerer img, #biographie .biographie main .bio-lepeintre .amerique .wrapper .img-centerer img{ display: none; visibility: hidden; } #biographie .biographie main .bio-lepeintre .oeuvre .left, #biographie .biographie main .bio-lepeintre .oeuvre .right{ float: none; width: 100%; display: block; margin: 0 auto; padding: 0 35px; } #biographie .biographie main .bio-lepeintre .oeuvre .wrapper{ margin: 0 auto 60px; } #biographie .biographie main .bio-lepeintre .oeuvre .right{ text-align: right; } .defile:after, .defileReverse:before{ margin-bottom: 0; } #biographie .biographie main .bio-lepeintre .sliding .text{ padding: 0 20px; } #biographie .biographie main .bio-lepeintre .sliding p{ font-size: 16px; line-height: 30px; } #biographie .biographie main .bio-lepeintre .sliding p br{ display: none; } #biographie .biographie main .bio-lepeintre .sliding #dragSpace{ top: 50px; } #biographie .biographie main .bio-lepeintre .citation{ position: relative; margin-bottom: 0; } #biographie .biographie main .bio-lepeintre .citation .text{ width: 100%; padding: 0 35px; left: 0; position: absolute; top: 160px; } #biographie .biographie main .bio-lepeintre .citation .text p{ font-size: 24px; line-height: 46px; } #biographie .biographie main .bio-lepeintre .citation .text p:before{ left: -40px; font-size: 210px; } #biographie .biographie main .bio-lepeintre .citation .img img{ width: 114%; max-width: 114%; } #biographie .biographie main .bio-lepeintre .amerique{ margin-bottom: 30px; } #biographie .biographie main .bio-lepeintre .amerique .wrapper{ margin-bottom: 110px; } #biographie .biographie main .bio-lepeintre .amerique .left, #biographie .biographie main .bio-lepeintre .amerique .right{ width: 100%; display: block; margin: 0 auto; padding: 0 35px; float: none; } #biographie .biographie main .bio-lepeintre .amerique .left h3{ left: -35px; position: relative; } #biographie .biographie main .bio-lepeintre .hommages .wrapper h3.flying-text{ font-size: 68px; } #biographie .biographie main .bio-lepeintre .hommages .wrapper .sliding .text p{ font-size: 16px; line-height: 24px; } #biographie .biographie main .bio-lepeintre .hommages .wrapper .hommagestabs{ padding-top: 50px; padding-bottom: 30px; margin-bottom: 40px; } #biographie .biographie main .bio-lepeintre .hommages .wrapper .hommagestabs .textes .texte{ padding: 0 35px; } #biographie .biographie main .bio-lepeintre .hommages .wrapper .hommagestabs .titres{ margin-bottom: 30px; } #biographie .biographie main .bio-lepeintre .hommages .wrapper .hommagestabs .titres{ text-align: left; padding: 0 35px; } #biographie .biographie main .bio-lepeintre .hommages .wrapper .sliding{ padding-bottom: 0; } #biographie .biographie main .bio-lepeintre .hommages .wrapper .hommagestabs .titres .titre{ max-width: 100%; width: 100%; height: 42px; } #biographie .biographie main .bio-lepeintre .hommages .wrapper .hommagestabs .titres .titre:before{ height: 30px; } } @media screen and (max-width:410px){ #biographie .biographie main .bio-head .wrapper p.dates{ padding-top: 30px; } } @media screen and (max-width:450px) , screen and (max-width : 1023px) { #biographie .biographie main .bio-lepeintre .oeuvre .wrapper, #biographie .biographie main .bio-lepeintre .oeuvre .wrapper p:last-of-type{ margin-bottom: 0; } #biographie .biographie main .bio-lepeintre .sliding .slidr{ height: auto; left: 0; } #biographie .biographie main .bio-lepeintre .sliding #wrapperBoxes{ position: relative; width: 100vw; height: auto; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper{ padding: 0 20px; position: relative; margin-bottom: 5vh; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper .img{ width: 100%; padding: 15px; margin: 0; margin-top: 7vh; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper .img img{ width: 100%; max-width: unset; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper .txt{ width: 80vw; margin-right: 0; margin-left: 10vw; margin-top: 75px; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper .txt3{ margin-right: 0; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper .txt h4{ font-size: 34px; line-height: 30px; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper .txt h4:before{ left: -38px; top: -170px; font-size: 110px; line-height: 270px; } #biographie .biographie main .bio-lepeintre .sliding .slidr .slide-wrapper .txt p{ font-size: 16px; line-height: 26px; } }