/* =================================================================== */ /* HEADER - Section /* =================================================================== */ header {position:relative; top:0; left:0; display:block} #header {width: 100%; height: 100vh; position: relative; overflow: hidden} #header picture {height: 100%; width: 100%; position: relative; display: inline-block; background-color:#1d160f} #header picture img {opacity:0.65; width: 100%; max-inline-size: 100%; block-size: 100%; object-fit: cover} @media all and (min-width:992px){ #header picture {background-color:#333019} #header picture img {opacity:0.8}} /* -------------------------------------------------------- slider */ [data-slide] .slide {top: 0; bottom: 0; left: 0; right: 0; opacity: 0; transition: opacity 1s ease; position: absolute; z-index: 300} [data-slide] .slide:first-child {opacity: 1} [data-slide] .next-btn, [data-slide] .prev-btn {top: 0; bottom: 0; width:60px; cursor: pointer; transition: all 200ms ease; position: absolute; display: none; z-index: 303} [data-slide] .next-btn::before, [data-slide] .prev-btn::before {top: 50%; font-size:35px; color:rgba(255, 255, 255, 0.9); text-shadow:1px 1px #555; position: absolute} [data-slide] .next-btn:hover::before, [data-slide] .prev-btn:hover::before {color: #000; opacity:0.25} [data-slide] .prev-btn {left: 0; transform: translateX(-100%)} [data-slide] .prev-btn::before {content: "❮"; left: 50%; transform: translate(-50%, -50%)} [data-slide] .next-btn {right: 0; transform: translateX(100%)} [data-slide] .next-btn::before {content: "❯"; right: 50%; transform: translate(50%, -50%)} [data-slide] input[type=radio] {position: fixed; top: -9999px} [data-slide] input[type=radio]:checked:nth-of-type(5) ~ .slides .slide, [data-slide] input[type=radio]:checked:nth-of-type(4) ~ .slides .slide, [data-slide] input[type=radio]:checked:nth-of-type(3) ~ .slides .slide, [data-slide] input[type=radio]:checked:nth-of-type(2) ~ .slides .slide, [data-slide] input[type=radio]:checked:nth-of-type(1) ~ .slides .slide {opacity: 0; animation: none !important} [data-slide] input[type=radio]:checked:nth-of-type(5) ~ .slides .slide:nth-child(5), [data-slide] input[type=radio]:checked:nth-of-type(4) ~ .slides .slide:nth-child(4), [data-slide] input[type=radio]:checked:nth-of-type(3) ~ .slides .slide:nth-child(3), [data-slide] input[type=radio]:checked:nth-of-type(2) ~ .slides .slide:nth-child(2), [data-slide] input[type=radio]:checked:nth-of-type(1) ~ .slides .slide:nth-child(1) {opacity: 1} [data-slide] input[type=radio]:checked:first-of-type:last-of-type ~ .prev-nav, [data-slide] input[type=radio]:checked:first-of-type:last-of-type ~ .next-nav {display: none !important} [data-slide]:hover .prev-btn, [data-slide]:hover .next-btn {transform: translateX(0)} [data-slide~=next-prev] input[type=radio]:checked:nth-of-type(5) ~ .prev-nav .prev-btn, [data-slide~=next-prev] input[type=radio]:checked:nth-of-type(5) ~ .next-nav .next-btn, [data-slide~=next-prev] input[type=radio]:checked:nth-of-type(4) ~ .prev-nav .prev-btn, [data-slide~=next-prev] input[type=radio]:checked:nth-of-type(4) ~ .next-nav .next-btn, [data-slide~=next-prev] input[type=radio]:checked:nth-of-type(3) ~ .prev-nav .prev-btn, [data-slide~=next-prev] input[type=radio]:checked:nth-of-type(3) ~ .next-nav .next-btn, [data-slide~=next-prev] input[type=radio]:checked:nth-of-type(2) ~ .prev-nav .prev-btn, [data-slide~=next-prev] input[type=radio]:checked:nth-of-type(2) ~ .next-nav .next-btn, [data-slide~=next-prev] input[type=radio]:checked:nth-of-type(1) ~ .next-nav .next-btn {display: none} [data-slide~=next-prev] input[type=radio]:checked:nth-of-type(5):first-of-type ~ .prev-nav .prev-btn:last-child, [data-slide~=next-prev] input[type=radio]:checked:nth-of-type(5):last-of-type ~ .next-nav .next-btn:first-child, [data-slide~=next-prev] input[type=radio]:checked:nth-of-type(4):first-of-type ~ .prev-nav .prev-btn:last-child, [data-slide~=next-prev] input[type=radio]:checked:nth-of-type(4):last-of-type ~ .next-nav .next-btn:first-child, [data-slide~=next-prev] input[type=radio]:checked:nth-of-type(3):first-of-type ~ .prev-nav .prev-btn:last-child, [data-slide~=next-prev] input[type=radio]:checked:nth-of-type(3):last-of-type ~ .next-nav .next-btn:first-child, [data-slide~=next-prev] input[type=radio]:checked:nth-of-type(2):first-of-type ~ .prev-nav .prev-btn:last-child, [data-slide~=next-prev] input[type=radio]:checked:nth-of-type(2):last-of-type ~ .next-nav .next-btn:first-child, [data-slide~=next-prev] input[type=radio]:checked:nth-of-type(1):first-of-type ~ .prev-nav .prev-btn:last-child, [data-slide~=next-prev] input[type=radio]:checked:nth-of-type(1):last-of-type ~ .next-nav .next-btn:first-child, [data-slide~=next-prev] input[type=radio]:checked:nth-of-type(5) ~ .prev-nav .prev-btn:nth-child(4), [data-slide~=next-prev] input[type=radio]:checked:nth-of-type(4) ~ .prev-nav .prev-btn:nth-child(3), [data-slide~=next-prev] input[type=radio]:checked:nth-of-type(3) ~ .prev-nav .prev-btn:nth-child(2), [data-slide~=next-prev] input[type=radio]:checked:nth-of-type(2) ~ .prev-nav .prev-btn:nth-child(1), [data-slide~=next-prev] input[type=radio]:checked:nth-of-type(4) ~ .next-nav .next-btn:nth-child(5), [data-slide~=next-prev] input[type=radio]:checked:nth-of-type(3) ~ .next-nav .next-btn:nth-child(4), [data-slide~=next-prev] input[type=radio]:checked:nth-of-type(2) ~ .next-nav .next-btn:nth-child(3), [data-slide~=next-prev] input[type=radio]:checked:nth-of-type(1) ~ .next-nav .next-btn:nth-child(2), [data-slide~=next-prev] .prev-btn:last-child, [data-slide~=next-prev] .next-btn:nth-child(2) {display: flex} /* -------------------------------------------------------- slideH1 */ .slides .text {display: flex; align-items: center; justify-content: center} .header__title {top:45%; transform: translateY(-55%); position: absolute; z-index: 302; text-align: center; color: #fff; animation:slideUp 0.75s .5s cubic-bezier(0.17,.88,.32,1.27) both, fadeIn .25s .5s ease-in both} .header__title h1 {margin-bottom:1rem; font:normal 13px 'Lato'; letter-spacing:0.2em; line-height:0; text-shadow:1px 1px #000} .header__title h1 span {display:block; font:normal 43px 'Signature'; letter-spacing:0; line-height:1.3; text-shadow:1px 1px #000; text-transform:none} .header__title p.author {font:normal 41px 'Florentino'; letter-spacing:0; line-height:1.35; text-shadow: 1px 1px #000; text-transform:uppercase} .header__title h2 {font:normal 11px 'Lato'; letter-spacing:0.25em; text-shadow:1px 1px #000} .header__logo {bottom:3.5%; position: absolute; z-index: 302; text-align: center; animation:slideUp 1s .5s cubic-bezier(0.17,.88,.32,1.27) both, fadeIn .25s .5s ease-in both} .header__logo img {opacity:0.9; width:100%; max-inline-size:95px; block-size:95px; object-fit: cover} @keyframes slideUp {from {transform: translateY(100%)} to {transform:translateY(-50%)}} @keyframes fadeIn {from {opacity: 0} to {opacity: 1}} @media all and (min-width:576px){ .header__title h1 {font-size:20px} .header__title h1 span {font-size:63px} .header__title p.author {font-size:62px} .header__title h2 {font-size:15px}} @media all and (min-width:992px){ [data-slide] .next-btn, [data-slide] .prev-btn {width:100px} .header__title h1 {font-size:21px} .header__title h1 span {font-size:67px} .header__title p.author {font-size:70px} .header__title h2 {font-size:17px}} /* -------------------------------------------------------- slide Hover */ .slides > article .slide-text {width: 100%; transform: translateY(100%); transition: .7s; position: absolute; z-index:301; display: inline-block} .slides > article .slide-text * {transform: translate(0, 100px); transition: all 7ms cubic-bezier(0.37, 0.31, 0.2, 0.85) 200ms; opacity: 0} .slides > article .slide-text h3 {font:normal 12px 'Lato'; letter-spacing:0.07em; line-height:1.7} .slides > article .slide-text p {font:normal 13px 'Lato'; letter-spacing:0.07em; line-height:1.3; padding:0 2.5rem} .slides > article .slides:hover .slide-text, .slides > article .slide-text {padding:0.8rem 0 0.7rem; width: 100%; bottom: 0; background-color: rgba(255,255,255,.5); color: #555; position: absolute; text-align: center} .slides:hover .slide-text * {transform: translate(0); opacity: 1} @media all and (min-width:576px){ .slides > article .slide-text {padding:0.8rem 0 0.7rem} .slides > article .slide-text p {padding:0 7.5rem}} @media all and (min-width:922px){ .slides > article .slide-text {padding:1rem 0rem 0.9rem} .slides > article .slide-text p {padding:0}} /* -------------------------------------------------------- arrow */ .slideArrow {bottom:1.15rem; left: 50%; transform: translate(0, -50%); z-index: 305; transform: rotate(0deg); animation: arrow 1.5s infinite; box-sizing: border-box; position: absolute; z-index:302; display: inline-flex; cursor:pointer} .slideArrow::before {font-size:1.8rem; color:rgba(255,255,255,.75); content: "\2193"} .slideArrow:hover {opacity: .7} @keyframes arrow {0% {transform: rotate(0deg) translate(0, 0)} 20% {transform: rotate(0deg) translate(0px, 20px)} 40% {transform: rotate(0deg) translate(0, 0)}} /* -------------------------------------------------------- nav menu */ nav {position: sticky; top: 0; width: 100%} /* =================================================================== */ /* MAIN - Index /* =================================================================== */ /* -------------------------------------------------------- section intro */ .intro {padding:3.5rem 0 0.5rem; margin: 0 auto; width:100%; position:relative; text-align:center; clear: both} .intro img {width:70px} .intro h2 {margin-top:1.8rem} .intro h2 span {font-size:25px; letter-spacing: 0.025em; text-transform:none} .intro h2 span:nth-child(1) {font:300 10px 'Lato'; letter-spacing: 0.23em; color:#888; line-height:0; display:block; text-transform:uppercase} .intro h2 span:nth-child(2), .intro h2 span:nth-child(3) {display:block} .intro h2 span:nth-child(2) em {margin-left:0.35rem; font:normal 110px 'Signature'; letter-spacing: 0.02em; line-height:0.43} .intro h2 span:nth-child(3) strong {font:bold 28px 'Florentino'; text-transform:uppercase; line-height:1.5} .intro p {margin:1rem auto 0; font-size: 19px; width:310px} @media all and (min-width:576px) { .intro {padding:4.5rem 0 1rem} .intro h2 span:nth-child(1) {font-size: 11px} .intro h2 span:nth-child(2) em {margin-left:0.6rem; font-size:139px} .intro h2 span:nth-child(3) strong {font-size:35px} .intro p {font-size: 22px; width:400px}} @media all and (min-width:992px) { .intro {padding:4.5rem 0 0} .intro h2 {margin-top:2.5rem} .intro h2 span {font-size:29px; letter-spacing: 0.01em} .intro h2 span:nth-child(2), .intro h2 span:nth-child(3) {display:inline-block; margin-top:0.2rem} .intro h2 span:nth-child(1) {font-size: 17px; letter-spacing: 0.2em} .intro h2 span:nth-child(2) em {font-size:150px} .intro h2 span:nth-child(3) strong {margin-left:-0.3rem; font-size:38px} .intro p {width:735px; margin-top:0.5rem}} @media all and (min-width:1200px) { .intro {padding:4.5rem 0 0.5rem} .intro p {font-size:20px; line-height:1.65; width:800px}} /* -------------------------------------------------------- Article 1 */ #article {text-align:center; position: relative; z-index:1; clear: both} #article .article-one {padding:3.95rem 0 4.5rem; margin: 3rem auto 0; text-align:center; background-color: #f7f5ef; position: relative; z-index:1; clear: both} #article h2 {left:19%; bottom:98%; right:100%; font:normal 50px 'Signature'; letter-spacing: 0.05em; color: #777; transform-origin: right bottom; white-space: nowrap; transform: rotate(-90deg); display: flex; position: absolute; z-index: 11; text-transform: none} #article .backG {margin: 0} #article .backG p {color:#000; text-align:justify} #article .backG p:nth-child(1) {margin:2.3rem 0 1rem} #article .backG p:nth-child(2) {margin-bottom:6rem} #article .IMG_1 {display:none} #article .IMG_2 {padding-left:3.5%; width:80%; border-left:1px solid #8b998d; margin: 0 0 0 auto; flex-direction: row-reverse; display: flex} #article .IMG_3 {display:none} #article a.btn {width:100%; text-align:center; display: table; bottom:0; left:0; right:0; position: absolute; z-index:10} @media all and (min-width:576px){ #article .article-one {padding:3.95rem 0 5rem} #article h2 {font-size:65px} #article .backG p:nth-child(1) {margin:3rem 0 1rem} #article .backG p:nth-child(2) {margin-bottom:6rem} #article .IMG_2 {margin-top:1rem} #article a.btn {width:330px}} @media all and (min-width:992px){ #article .article-one {padding:4.5rem 0 0; margin-top:0; background-color: #fff} #article h2 {left:11.35%; bottom:0} #article .line {left:11.5%; top:50%; width:1px; height:100%; transform: translateY(-50%); background-color: #8b998d; content: ''; position: absolute} #article .backG {padding:0 3rem 3.2rem; margin: 0 2rem 0 auto; width:80%; background-color: #f7f5ef; position:relative; z-index:0} #article .backG p {font-size:21px; letter-spacing:0.05em; line-height:1.6; position: relative} #article .backG p:nth-child(2) {margin-bottom:0} #article .IMG_1 {width:95%; margin:2rem 2rem 0 auto; flex-direction: row-reverse; display: flex} #article .IMG_2 {width:97%; margin:8rem auto 0 0; padding-left:0; border:none} #article .IMG_3 {bottom:11rem; right: -2rem; width: 150px; opacity:0.7; display:block; position: absolute; z-index: 2} #article a.btn {bottom:6.25rem; left:18rem; width:290px}} @media all and (min-width:1200px){ #article h2 {left:22%} #article .line {left:24.3%} #article .backG {padding:0 3.9rem 4.3rem; width:69%} #article .backG p:nth-child(1) {margin:3.9rem 0 1rem} #article .IMG_1 {width:85%} #article .IMG_2 {margin-top:7rem; width:90%} #article .IMG_3 {right:0} #article a.btn {bottom:6.75rem; left:20rem}} /* -------------------------------------------------------- Quote */ .pull-quote {margin: 0 auto; text-align: center; position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden} .pull-quote blockquote {margin:0; padding:0; line-height:1; position:relative; text-align:center} .pull-quote blockquote p {line-height: 1.35} .pull-quote figcaption {margin-top:1rem; font-size:17px; font-style: italic; color: #777; text-transform:none} @media all and (min-width:576px){ .pull-quote {padding-top:8rem; left:0; width:auto; height:auto; position: relative; overflow: visible; z-index:2} .pull-quote svg {top:3.5rem; height:50px; fill: #f5f0e7; left:50%; transform: translateX(-50%) rotateZ(180deg); position: absolute; display:block} .pull-quote blockquote p {width:390px} .pull-quote blockquote::before {font-size:11rem} .pull-quote figcaption {margin-top:1.5rem; font-size:19px; display: inline-block}} @media all and (min-width:992px){ .pull-quote {padding-top:10.5rem} .pull-quote svg {top:4.5rem; height:65px} .pull-quote blockquote {line-height:1.5} .pull-quote blockquote p {font-size:22px; width:650px} .pull-quote blockquote::before {font-size:17rem} .pull-quote figcaption {margin-top:1.5rem; font-size:20px; letter-spacing:0.05em}} /* -------------------------------------------------------- Cherchez */ .search {padding:3.75rem 0 4.25rem; margin: 0 auto; width: 100%; position: relative; clear: both; z-index:1} .search-one {margin-top:2.15rem} .search-one p.p1 {font:normal 17px 'Lato'; letter-spacing:0.125em; line-height:1.6; color:#888; text-transform:uppercase} .search-one h2 {margin: 0 auto; width:300px; font-size: 35px; letter-spacing:-0.01em; line-height:1.2; text-transform:none; text-align:center} .search-one p.p2 {margin:1.5rem 0 2rem; text-align:justify} .search-one h3 {margin: 0 auto 2.5rem; width:300px; font:normal 45px 'Signature'; line-height:0.7; text-align:center; text-transform:none; hyphens: auto; word-wrap: break-word} .search-one a.btn {width:100%; text-align:center; display: table} .search-two {width:100%; position: relative} .search-two img {width:100%} .search-two img:nth-child(1) {padding-right:0.25rem; width:49.25%} .search-two img:nth-child(2) {padding-left:0.25rem; width:49.25%} @media all and (min-width:576px){ .search {padding:3rem 0 5rem} .search-one {margin-top:2.5rem} .search-one p.p1 {line-height:2} .search-one p.p2 {margin:2rem 0 2.5rem} .search-one h3 {margin-bottom:3rem; width:350px; font-size:50px}} @media all and (min-width:992px){ .search {margin-top:4rem; background-color: #f7f5ef} .search-one {padding-right:4.5rem; margin-top:0} .search-one p.p1 {text-align:left; font-size:18px; letter-spacing:0.1em; line-height:1.5} .search-one h2 {margin:0; width:280px; font-size:32px; line-height:1.15; text-align:left} .search-one p.p2 {margin:1.25rem 0 1.5rem; font-size:21px; letter-spacing:0.005em; line-height:1.3} .search-one h3 {margin-bottom:2.15rem; width:100%; font-size:38px; text-align:left} .search-one a.btn {margin:0 auto 0 0; width:350px} .search-two img:nth-child(1) {right:-6rem; padding-right:0; margin: 0 0 0 auto; width:59%; position: absolute} .search-two img:nth-child(2) {left:-0.5rem; width:59%; margin: 10.5rem auto 0 0; padding-left:0; position: absolute}} @media all and (min-width:1200px){ .search {padding:5rem 0 6rem} .search-one {padding:0 8rem 0 1rem} .search-one p.p2 {margin:1.25rem 0 1.75rem} .search-two img:nth-child(1) {right:-1rem; width:52%} .search-two img:nth-child(2) {left:-2rem; width:52%; margin-top:9.5rem}} /* -------------------------------------------------------- About */ #about {padding:3.95rem 0 4.5rem; margin: 0; position: relative; z-index:1; clear: both} #about .about-top {position: relative; z-index:1; display:none; clear: both} #about .about-top::after {bottom:42px; border-bottom:1px solid #8b998d; opacity:0.7; width: 100%; position: absolute; content: ''} #about .about-top .about-1 {font:500 33px 'Florentino'; letter-spacing:-0.01em; text-transform:none} #about .about-top .about-2 {margin-top:1.85rem; margin-left:0.1rem} #about .about-top .about-2 a > .mii {font:normal 13px 'Lato'; letter-spacing: 0.15em} #about .about-top .about-2 a > .mii::after {padding-left:0.7rem; font-size:1.35rem; transition: .7s; color:#777; position:relative; content: "\2192"} #about .about-top .about-2 a > .mii:hover, #about .about-top .about-2 a > .mii:hover::after {transform: scale(1.1, 1.05); color: #d4af37} #about .about-bottom .about-3 img {width:100%} #about .about-bottom .about-4 {margin-top:2.25rem} #about .about-bottom .about-4 .course {font-size:26px; letter-spacing:0.01em; text-transform:none} #about .about-bottom .about-4 .courseLine {margin:1.25rem 0 1.75rem; height:1px; background-color: #8b998d; width:80px; opacity:0.7} #about .about-bottom .about-4 .karine {font:normal 23px 'Florentino'; letter-spacing:0.025em} #about .about-bottom .about-4 h2 {margin-bottom:0.75rem; font:italic 23px 'Cormorant'; letter-spacing:0; line-height:1.75; text-transform:none; text-align:justify; hyphens: auto; word-wrap: break-word} #about .about-bottom .about-4 p.about-p {margin-bottom:1.75rem} #about .about-bottom .about-4 p a, #about .about-bottom .about-4 p {margin-top:0.5rem; letter-spacing: 0.025em; line-height:1.39; text-align:justify} #about .about-bottom .about-4 .line {margin:1.75rem 0; height:1px; background-color: #8b998d; width: 100%; opacity:0.7} #about .about-bottom .about-4 h3 {font:normal 15px 'Lato'; letter-spacing: 0.05em; line-height:1} #about .about-bottom .about-4 h3 span {display:block} #about .about-bottom .about-4 h3 span:nth-child(1) {font:normal 15px 'Lato'; letter-spacing: 0.075em; line-height:1.5} #about .about-bottom .about-4 h3 span:nth-child(2) {font:normal 21px 'Cormorant'; letter-spacing:0.035em; line-height:1.5; text-transform:none} #about .about-bottom .about-4 a.btn {margin-top:2.75rem; width:220px; text-align:center; display: table} @media all and (min-width:576px){ #about {padding:5rem 0} #about .about-bottom .about-4 {margin-top:3rem} #about .about-bottom .about-4 .course {font-size:32px} #about .about-bottom .about-4 .courseLine {width:100px} #about .about-bottom .about-4 .karine, #about .about-bottom .about-4 h2 {font-size:29px} #about .about-bottom .about-4 p {margin-bottom:2.5rem} #about .about-bottom .about-4 .line {margin:2rem 0} #about .about-bottom .about-4 h3 span:nth-child(1) {font-size:17px} #about .about-bottom .about-4 h3 span:nth-child(2) {font-size:23px} #about .about-bottom .about-4 a.btn {margin-top:3.5rem; width:239px}} @media all and (min-width:992px){ #about {padding:3.25rem 0 0} #about .about-top {display:inline-flex} #about .about-top::after {bottom:52px} #about .about-top .about-1 {margin-bottom:4.5rem; font-size:40px} #about .about-top .about-2 {margin-top:0; margin-left:0} #about .about-top .about-2 a {margin:1.35rem 0.25rem 0 0; flex-direction: row-reverse; display: flex} #about .about-top .about-2 a > .mii {transition: .7s} #about .about-bottom {margin-top:0} #about .about-bottom .about-3 img {width:90%} #about .about-bottom .about-4 {padding-left:2.5rem; margin-top:1.35rem} #about .about-bottom .about-4 .karine {font-size:30px; text-transform:none} #about .about-bottom .about-4 h2 {margin-bottom:1rem; font-size:25px; line-height:1.35} #about .about-bottom .about-4 p a, #about .about-bottom .about-4 p {font-size:21px; line-height:1.35em} #about .about-bottom .about-4 .line {margin:1.5rem 0} #about .about-bottom .about-4 h3 span:nth-child(1) {font-size:15px; line-height:1.7} #about .about-bottom .about-4 h3 span:nth-child(2) {font-size:21px; line-height:1.7} #about .about-bottom .about-4 p.about-p1, #about .about-bottom .about-4 .course, #about .about-bottom .about-4 .courseLine, #about .about-bottom .about-4 a.btn {display: none}} @media all and (min-width:1200px){ #about .about-bottom .about-4 p {margin-bottom:2rem} #about .about-bottom .about-4 p.about-p1 {display: block}} /* -------------------------------------------------------- Carousel */ #carousel {margin: 0; position: relative; z-index:1; clear: both} .sliding {height:300px; width: 100%; position: relative; overflow: hidden} .slider {height:300px; width: 100%; top:0; right:0; left:0; z-index: 1; opacity: 0; text-align:center; background-size:cover; position: absolute} .slider:nth-child(1){filter: grayscale(.3); background-image:url(../img/mariage/photo_1.webp); background-position: center} .slider:nth-child(2){filter: grayscale(.3); background-image:url(../img/mariage/photo_2.webp); background-position: center} .slider:nth-child(3){filter: grayscale(.1); background-image:url(../img/mariage/photo_3.webp); background-position: center} .slider.active, .slider.left, .slider.right {z-index: 2; opacity: 1} .slider.left {left:-100%; right:0} .slider.right {right:-100%; left: auto} .transition .slider.left {left:0%} .transition .slider.right {right:0%} .transition .slider.shift-right {right: 100%;left:auto} .transition .slider.shift-left {left: 100%;right:auto} .transition .slider {transition-property: right, left, margin} .arrow {width: 20px; height: 20px; top:50%; border-top:3px solid #fff; border-right:3px solid #fff; transition:border-color 0.3s ease-out; cursor:pointer; position:absolute; z-index:5} .arrow:hover {border-color:#666} .arrow-left {left:20px; transform:rotate(225deg)} .arrow-right {right:20px; transform:rotate(45deg)} .slidetxt {padding:2.5rem 0 3.35rem; position: relative; background-color: #f7f5ef} .slidetxt-1 {width:80%; margin:auto; position:relative} .slidetxt h2 {font:normal 57px 'Signature'; letter-spacing:0.02em; text-transform:none; text-align:center} .slidetxt p {width: 320px; margin:1rem auto 0; color:#000} @media all and (min-width:576px) { .sliding {height:400px} .slider {height:400px} .slidetxt {padding:3rem 0 3.95rem} .slidetxt h2 {margin-right:2rem; font-size:62px} .slidetxt p {width:400px; letter-spacing:0.05em; line-height:1.6}} @media all and (min-width:992px){ #carousel {padding-top:5rem} .sliding {height: 500px} .slider {height: 500px} .slidetxt {padding:4rem 0 0; margin-left: 1rem; height: 500px} .slidetxt-1 {width:260px} .slidetxt h2 {width:260px; font-size: 50px; text-align:right} .slidetxt p {font-size:21px; letter-spacing:0.015em; line-height:1.5; width: 100%; margin:1rem 0 0; text-align:right}} @media all and (min-width:1200px){ .slidetxt {margin-left:2rem} .slidetxt-1 {margin: 0 4rem 0 auto}} @media all and (min-width:1359px){ #carousel {padding-top:5.5rem} .slidetxt {margin-left:3rem} .slidetxt-1 {margin: 0 6rem 0 auto}} /* -------------------------------------------------------- Célébration */ .celebrate {padding:2.5rem 0 4.5rem; margin: 0 auto; position: relative; z-index:1; clear: both} .celebrate .love-one {margin-bottom:1.75rem} .celebrate .love-one h2 {font:normal 50px 'Signature'; letter-spacing:0.02em; text-shadow: .0625em .0625em 0 rgba(0, 0, 0, .2); letter-spacing:0.02em; text-transform:none; position: relative; overflow: hidden; text-align: right} .celebrate .love-one h2 span {top:0.05rem; left:-0.35rem; font-size:22px; color: #555; text-shadow:none; position: relative} .celebrate .love-one h2::before {margin-left: -90%; bottom: 31%; width:88%; height:10px; background-color: #f7f5ef; position: absolute; overflow: hidden; content: ''} .celebrate .love-two {text-align: center} .celebrate .love-two h3 {margin-top:2rem; font-size: 18px; letter-spacing:0.025em} .celebrate .love-two .line {margin:1.3rem auto 0.5rem; width:0.1rem; height:50px; background-color: #8b998d; position:relative} .celebrate .love-two h4 {font:normal 41px 'Signature'; letter-spacing:0.02em; text-transform:none} .celebrate .love-two p {margin: 0.5rem auto 2.75rem; width:265px} .celebrate .love-two img {width:100%} .celebrate .love-two .pBtn {margin-bottom:2.25rem} .celebrate a.btn {width:280px; text-align:center; display: table} @media all and (min-width:576px) { .celebrate {padding:3.5rem 0 5.5rem} .celebrate .love-one {margin-bottom:2rem} .celebrate .love-one h2 {font-size:60px} .celebrate .love-two h3 {margin-top:3rem; font-size:20px} .celebrate .love-two h4 {font-size:45px} .celebrate .love-two p {margin: 0.5rem auto 3.5rem; width:330px} .celebrate a.btn {width:310px}} @media all and (min-width:992px) { .celebrate {padding:3.25rem 0 5rem} .celebrate .love-one {margin-bottom:1.5rem} .celebrate .love-one h2 {font-size:70px} .celebrate .love-two h3 {margin-top:2.5rem; font-size:16px} .celebrate .love-two h4 {font-size:39px} .celebrate .love-two p {margin: 0.25rem auto; font-size:21px; letter-spacing:0.075em; width:83%} .celebrate .love-two .pBtn {margin-bottom:0} .celebrate .love-two .img-one {padding-right:0.7rem} .celebrate .love-two .img-two {padding-left:0.35rem; padding-right:0.35rem} .celebrate .love-two .img-three {padding-left:0.7rem} .celebrate a.btn {margin-top:3rem}} @media all and (min-width:1200px) { .celebrate .love-one h2 {font-size:80px} .celebrate .love-two .line {margin:1.35rem auto 0.7rem} .celebrate .love-two p {width:81%} .celebrate .love-two .img-one {padding-right:2rem} .celebrate .love-two .img-two {padding-left:1rem; padding-right:1rem} .celebrate .love-two .img-three {padding-left:2rem}} /* -------------------------------------------------------- Galeries mariage */ .portfolio {padding:4.5rem 0; margin: 0; background-color: #f7f5ef; position: relative; z-index:1; clear: both} .portLeft {margin-bottom:0.5rem} .portLeft .hr {margin-top:-0.5rem; top:0; left:3rem; height:115px; border-left:3px solid #8b998d; box-shadow: 1px 1px 0 #333; position:absolute} .portLeft .gal {margin-bottom:3.5rem; margin-left:5rem} .portLeft .gal span {display:block} .portLeft .gal span.gal1 {font-size:38px; text-transform:none} .portLeft .gal span.gal2 {font:normal 39px 'Playfair'; letter-spacing:0} .portCenter > :nth-child(1) {margin-top:1rem} .portCenter > :nth-child(2), .portCenter > :nth-child(3) {margin-top:1.5rem} .portCenter h2 {margin:2.5rem auto 2rem; font:normal 21px 'Cormorant'; letter-spacing:0.05em; line-height:1.75; width:250px; display:block; text-align:center} .portCenter a.btn {width:210px; text-align:center; display: table} .portRight {display:none} @media all and (min-width:576px){ .portfolio {padding:5.5rem 0 5rem} .portLeft .hr {margin-top:-1rem; left:5rem; height:130px} .portLeft .gal {margin-bottom:4rem; margin-left:8rem} .portLeft .gal span.gal1 {font-size:40px} .portLeft .gal span.gal2 {font-size:46px} .portCenter h2 {font-size:30px; width:350px} .portCenter a.btn {width:225px}} @media all and (min-width:767px){ .portLeft img, .portCenter img {margin:0 auto; width:700px; display:flex; align-items:center; justify-content:center; position:relative}} @media all and (min-width:992px){ .portfolio {padding:4rem 0 5rem} .portLeft {margin-top:7rem} .portLeft .hr {height:70px; top:2.75rem; left:16.70%; transform: translateX(-50%); padding-top:0} .portLeft .gal {margin:0 auto 3.9rem; text-align:center} .portLeft .gal span.gal1 {font-size:33px} .portLeft .gal span.gal2 {font-size:39px} .portCenter h2 {padding-right:1.3rem; margin:1.8rem auto 0; font-size: 16px; line-height:1.8; text-align:right; width:auto} .portCenter > :nth-child(1) {padding:1rem; margin-top:0} .portCenter > :nth-child(2), .portCenter > :nth-child(3) {display:none} .portCenter a.btn {margin:2rem 1.35rem 0 auto} .portRight {margin-top:1rem; display:block} .portRight > :nth-child(1) {margin-bottom:1rem}} @media all and (min-width:1200px){ .portLeft {margin-top:9.5rem} .portLeft .hr {top:5rem} .portLeft .gal {margin:0 auto 5rem} .portCenter h2 {padding-right:2rem; margin:2.35rem auto 0; font-size:18px} .portCenter > :nth-child(1) {padding:1.5rem} .portCenter a.btn {margin:3rem 2rem 0 auto} .portRight {margin-top:1.5rem} .portRight > :nth-child(1) {margin-bottom:1.5rem}} /* -------------------------------------------------------- Investissement */ .investment {padding:3.25rem 0 4.5rem; color:#000; background-color: #f7f5ef; text-align:center; position: relative; z-index:1; clear: both} .investment .subInvestment {font-size:15px; letter-spacing:0.25em; color: #888; text-transform: uppercase} .investment h2 {margin:1.6rem auto 0} .investment h2 span {display:block} .investment h2 span:nth-child(1) {font:normal 37px 'Florentino'; letter-spacing:0.05em; line-height:0; color: #bbb} .investment h2 span:nth-child(2) {font:normal 37px 'Signature'; letter-spacing:0; line-height:0; text-transform:none} .investment p.subInvestment_p {margin:2.75rem auto 2.25rem; width:280px} .investment .flip {width:100%; position: relative; backface-visibility: hidden; transform-style: preserve-3d; perspective: 1000px} .investment .flip .front, .investment .flip .back {border-top:10px solid #f7f5ef; border-bottom:10px solid #f7f5ef; min-height:450px; background-size: cover; background-position: center; transition: transform 0.7s cubic-bezier(.4,.2,.2,1); backface-visibility: hidden} .investment .flip .front {transform: rotateY(0deg); transform-style: preserve-3d} .investment .flip:hover .front {transform: rotateY(-180deg); transform-style: preserve-3d} .investment .flip .inner {color:#fff; left: 0; width:100%; top:45%; transform: translateY(-55%); text-align:center; position: absolute; z-index: 2} .investment .flip .inner h2 {font:normal 65px 'Signature'; color:#fff; text-transform: none} .investment .flip .inner p.seeMore {font:bold 12px 'Lato'; letter-spacing:0.15em; text-decoration: underline; text-transform: uppercase} .investment .flip .back {background-color: #8b998d; top: 0; left: 0; width:100%; transform: rotateY(180deg); transform-style: preserve-3d; position: absolute} .investment .flip:hover .back {transform: rotateY(0deg); transform-style: preserve-3d} .investment .flip .back h3 {margin-top:3.9rem; font:normal 60px 'Signature'; color:#fff; text-transform: none} .investment .flip .back ul {padding:25px 0 0 50px; list-style: none; width: 100%; text-align:left} .investment .flip .back ul li {margin-bottom:1rem; padding-left: 1.5rem; font-size:19px; letter-spacing:0.02em; color:#fff; position: relative; text-transform: none} .investment .flip .back ul li::before {font-size:15px; top:0.1rem; left: 0; content: '\2713'; color: #fff; position: absolute} .investment a.btn {margin-top:2rem; width:230px; text-align:center; display: table} @media screen and (min-width:576px) { .investment {padding:3.5rem 0 5rem} .investment h2 {margin-top:2rem} .investment h2 span:nth-child(1), .investment h2 span:nth-child(2) {font-size:43px} .investment p.subInvestment_p {margin:3rem auto 2.25rem; width:400px} .investment .flip .inner h2 {font-size:80px} .investment .flip .back h3 {margin-top:3rem; font-size:75px} .investment .flip .back ul {padding:25px 0 0 75px} .investment .flip .back ul li {margin-bottom:0.75rem; padding-left:2rem; font-size:22px} .investment .flip .back ul li::before {top:0.15rem} .investment a.btn {margin-top:2.5rem; width:250px}} @media screen and (min-width:992px) { .investment {padding:4rem 0 4.5rem} .investment p.subInvestment_p {margin:3.5rem auto; width:680px} .investment .flip .inner h2 {font-size:60px} .investment .flip .back h3 {font-size:55px} .investment .flip .back ul {padding:25px 0 0 40px} .investment .flip .back ul li {padding-left:1.5rem; font-size:20px} .investment .flip .img1:nth-child(1) {border-right:10px solid #f7f5ef} .investment .flip .img2:nth-child(1) {border-right:6px solid #f7f5ef; border-left:6px solid #f7f5ef} .investment .flip .img3:nth-child(1) {border-left:10px solid #f7f5ef} .investment .flip .front, .investment .flip .back {border:0; min-height:390px} .investment a.btn {margin-top:3rem}} @media all and (min-width:1200px){ .investment {padding:4rem 0 5rem} .investment .flip .inner h2 {font-size:70px} .investment .flip .back h3 {font-size:65px} .investment .flip .back ul {padding:25px 0 0 75px} .investment .flip .img1:nth-child(1) {border-right:15px solid #f7f5ef} .investment .flip .img2:nth-child(1) {border-right:11px solid #f7f5ef; border-left:11px solid #f7f5ef} .investment .flip .img3:nth-child(1) {border-left:15px solid #f7f5ef} .investment .flip .front, .investment .flip .back {border:0; min-height:430px}}