@charset "UTF-8";

@font-face {font-family: 'Lato'; font-style: normal; font-weight: normal; src: url('../fonts/Lato.woff') format('woff')}
@font-face {font-family: 'Cormorant'; font-style: normal; font-weight: normal; src: url('../fonts/Cormorant.woff2') format('woff2')}
@font-face {font-family: 'Signature'; font-style: normal; font-weight: normal; src: url('../fonts/Signature.woff2') format('woff2')}
@font-face {font-family: 'Playfair'; font-style: normal; font-weight: normal; src: url('../fonts/Playfair.woff2') format('woff2')}
@font-face {font-family: 'Florentino'; font-style: normal; font-weight: normal; src: url('../fonts/Florentino.woff2') format('woff2')}
@font-face {font-family: 'FontAwesome'; font-weight:normal; font-style:normal; src:url('../fonts/fontawesome.woff') format('woff')}								
					
* {padding: 0; margin: 0; box-sizing: border-box}
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, blockquote, pre, abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp, small, b, strong, p strong, p b, sub, sup, var, i, dl, dt, dd, ol, ul, li,fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0 none; outline: 0; vertical-align: baseline; background-color: transparent; text-decoration:none; font-weight:400} 
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display: block}					
html {font-size:100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color:#333; scrollbar-width: thin; scrollbar-color: #000 #d1c286; background-color:#fff; overflow-x:hidden; overflow-y: scroll}					
html::-webkit-scrollbar {width:10px}
html::-webkit-scrollbar-track {background-color: #d1c286}
html::-webkit-scrollbar-thumb {background-color: #333}
body {min-height: 100vh; max-width: 100%; *zoom: 1; position: relative; display: block}
body::before, 
body::after {content: ""; display: table}
body::after {clear: both}
/* ============= Body ============= */
select {-webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none}
select::-ms-expand {display: none}				
ul, li {list-style: none}
img {border:0; page-break-inside:avoid; max-width:100%!important; height: auto; vertical-align:middle}
a {text-decoration: underline dotted #8b998d; cursor:pointer}
a:active, 
a:focus, 
a:link,
a:visited {color: inherit; outline:0; text-decoration:none}	
button::-moz-focus-inner{border:0} 
html,body,span,ul,li,input,textarea,button {font-family: 'Cormorant', serif; font-weight: normal; font-style: normal; text-transform:uppercase}	
h1,h2,h3,h4,h5,h6 {font-family: 'Playfair', serif; font-weight: normal; font-style: normal; text-transform:uppercase}	
/* -------- */
p,
p a {font-size:20px; letter-spacing:0.05em; line-height:1.5; text-transform:none; text-align:center; hyphens: auto; word-wrap: break-word}					
p a {font-size:100%; border-bottom:1px dotted rgba(0,0,0,0.8)}
p a:hover {border-bottom:1px solid #8b998d}	
@media all and (min-width:576px) {	
	p,
	p a {font-size:22px; letter-spacing:0.1em}}				
/* -------- */	
a.btn {padding:13px 0; line-height:1.3; margin: 0 auto; color: #fff; background-color:#8b998d; border-radius: 2px; position: relative; text-decoration: none}
a.btn span {margin-left:0.75rem; font:normal 13px "Lato"; letter-spacing:0.15em; display: inline-block; transition: all .35s ease-out}
a.btn span,
a.btn i {backface-visibility: hidden; transform: translateZ(0); perspective: 1000px}
a.btn i {top:14px; transition: all .35s ease-out; color: #fff}
a.btn i.before {margin-left:-20px; transform-origin: left center; position: absolute}
a.btn i.after {transform: translateX(75%) scaleX(0.1); transform-origin: right center;  opacity: 0; position: absolute}
a.btn:hover span {transform: translateX(-10px)}
a.btn:hover i.before {opacity: 0; transform: translateX(-75%) scaleX(0.1)}
a.btn:hover i.after {color: #fff; opacity: 1; transform: translateX(0) scaleX(1)}	

/* =================================================================== */
/* HEADER - Section
/* =================================================================== */	
		
/* -------------------------------------------------------- nav page */
.nav {position: fixed ! important; top: 0; width: 100%} 	
/* -------------------------------------------------------- Hero */
.hero-header {padding:2.5rem 0; background: url(../img/divider/header-small.webp) center center no-repeat; background-size: cover}
.hero {margin: 100px auto 0; width: 100%; text-align:center}
.hero .hero-head {font:normal 14px 'Lato'; letter-spacing:0.1em; color:#555; line-height:1.25; text-transform:uppercase}
.hero .hero-head strong {font:700 29px 'Playfair'; letter-spacing:0.015em; color:#444; display:block}
.hero .hero-head strong:last-child {word-spacing: -0.1em}
.hero ol {margin-top:0.35rem; padding: 0; list-style: none}
.hero ol li {line-height:0; display:inline; position:relative}
.hero ol li span,
.hero ol li a span {font:normal 15px 'Lato'; letter-spacing:0.025em; color: #d1c286; transition: all 0.2s ease; text-decoration: none; text-transform:none}
.hero ol li span.active {border-bottom:1px solid #d1c286}
.topLinkLi + .topLinkLi::before {padding: 0 0.30rem 0 0.10rem; top:0.07rem; font-size:20px; color:#d1c286; content: " • "; display: inline-block; position: relative}	
@media all and (min-width:576px) {
	.hero-header {padding:3.5rem 0}
	.hero .hero-head {font-size:18px; letter-spacing:0.15em; color:#8e8e8e}
	.hero .hero-head strong {font-size:40px; letter-spacing:0.035em}
	.hero ol {margin-top:0.5rem}
	.hero ol li span,
	.hero ol li a span {font-size: 16px}}
@media all and (min-width:992px) {
	.hero-header {padding:3.95rem 0; background: url(../img/divider/header-large.webp) center center no-repeat; background-size: cover}
	.hero .hero-head {line-height:1.5}
	.hero ol {margin-top:0.75rem}
	.hero ol li span,
	.hero ol li a span {font-size: 17px}}
@media all and (min-width:1200px) {
	.hero-header {padding:4.5rem 0; background: url(../img/divider/header-large.webp) center top 40% no-repeat; background-size: cover}}
/* -------------------------------------------------------- nav menu */
#navbar {max-height:100px; background-color:#fff; box-shadow:0 1px 0 #e0e0e0; z-index:55555}
#navbar ul {margin:0; padding:0; display:none; background-color:#fff}
#navbar ul::before,
#navbar ul::after {content:""; display:table}
#navbar ul::after {clear:both}
#navbar ul > li > a {padding:1.1rem 0; width:100%; text-align:center; position:relative; display:inline-block}
#navbar ul > li > a,
#navbar ul > li > a span {font:normal 15px "Lato"; letter-spacing:0.15em}
#navbar ul > li > a:hover,
#navbar ul > li > a span:hover {color:#737f75}
#navbar ul > li > a:hover::after {width:100%}
#navbar ul > li.dropdown .dropdown-menu .subdropdown,
#navbar ul > li.dropdown {position:relative}
#navbar ul > li.dropdown:hover .dropdown-menu {top:100%; opacity:1; visibility:visible; display:block}
#navbar ul > li.dropdown .dropdown-menu {margin:0 auto; top:500%; transition:all 250ms; opacity:0; visibility:hidden; display:none;position:relative}
#navbar ul > li.dropdown .dropdown-menu li {width:100%}
#navbar ul > li.dropdown .dropdown-menu li a {padding:10px 0; width:100%; display:block; text-align:center}
#navbar ul > li.dropdown .dropdown-menu li a .submariage {top:-0.25rem; position:relative}
#navbar ul > li.dropdown > a span::after,
#navbar ul > li.dropdown .dropdown-menu .subdropdown > a span::after {top:-0.125rem; margin-left: 8px; content: "\2193"; position:relative}
#navbar ul > li.dropdown .dropdown-menu .subdropdown-menu {margin:-0.25rem auto 0.5rem; padding:0; width:100%; border:0; display:block; box-shadow:none; opacity:1; visibility:visible; background:transparent}
#navbar ul > li.dropdown .dropdown-menu .subdropdown-menu li {width:100%}
#navbar ul > li.dropdown .dropdown-menu .subdropdown-menu li a {padding:7px 0; font:normal 13px "Lato"; width:100%; display:block; text-align:center}
#navbar input[type=checkbox] {display:none}
#navbar input[type=checkbox]:checked ~ #menu {padding-top:5rem; border-top:1px solid rgba(0,0,0,.1); min-height:100vh; display:block}
#navbar .menu-icon {padding-right:25px; height:100px; display:flex; align-items:center; justify-content:flex-end; position:relative; user-select:none; cursor:pointer; z-index:602}
#navbar .menu-icon .navicon {width:35px; height:5px; background-color:#333; display:block; position:relative; transition:background .2s ease-out}
#navbar .menu-icon .navicon::before,
#navbar .menu-icon .navicon::after {background-color:#333; content:''; display:block; height:100%; position:absolute; transition:all .2s ease-out; width:100%}
#navbar .menu-icon .navicon::before {top:10px}
#navbar .menu-icon .navicon::after {top:-10px}
#navbar .menu-btn {display:none}
#navbar .menu-btn:checked ~ .menu-icon .navicon {background-color:transparent}
#navbar .menu-btn:checked ~ .menu-icon .navicon::before {transform:rotate(-45deg)}
#navbar .menu-btn:checked ~ .menu-icon .navicon::after {transform:rotate(45deg)}
#navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon::before,
#navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon::after {top:0}
#navbar .display a {margin:2rem auto 0; padding:10px 50px 12px; color:#fff; background-color:#8b998d; width:auto; transition:background 1s ease; border-radius:3px; text-align:center; display:table; position:relative}
#navbar .display a:hover {background-color:#737f75; color:#fff}
#navbar .social {margin:3.5rem auto 0; text-align:center; display:table}
#navbar .social a.brouiller,
#navbar .social a {margin-right:1rem; font-size:23px; color:#8b998d; display:inline}
#navbar .social a.brouiller:hover,
#navbar .social a:hover {color:#737f75}
#navbar .social a.brouiller:last-of-type,
#navbar .social a:last-of-type {margin-right:0}
#navbar .social a.brouiller::after {display:none; content:attr(data-name) "@" attr(data-domain) "." attr(data-tld)}
#booking,
#phone {display:none}
@media all and (min-width:576px) {
	#navbar .menu-icon {padding-right:60px}
	#navbar input[type=checkbox]:checked ~ #menu {padding-top:6rem}
	#navbar ul > li > a {padding:1.5rem 0}
	#navbar ul > li > a,
	#navbar ul > li > a span {font-size:17px}
	#navbar ul > li.dropdown .dropdown-menu .subdropdown-menu {margin:0 auto 0.5rem}
	#navbar ul > li.dropdown .dropdown-menu .subdropdown-menu li a {font-size:15px}}
@media all and (min-width:1024px) {
	#navbar ul {display:block !important; width:100%; text-align:right; line-height:100px}
	#navbar ul > li {position:relative; display:inline-block}
	#navbar ul > li > a {padding:0 0.55rem}
	#navbar ul > li > a,
	#navbar ul > li > a span {font-size:12px}
	#navbar ul > li > a:hover,
	#navbar ul > li > a span:hover {color:#000}
	#navbar ul > li > .line {position:relative; display:inline-block}
	#navbar ul > li > .line::after {top:3.5rem; left:0; right:0; bottom:0; margin:auto; width:0; height:.15rem; background:#8b998d; transition:.1s; position:absolute; content:''}
	#navbar ul > li.dropdown:hover .dropdown-menu {top:100%; line-height:35px; box-shadow:0 3px 5px 0 rgba(0,0,0,.05)}
	#navbar ul > li.dropdown .dropdown-menu {top:150%; width:160px; padding:1rem 0 1.25rem; margin:-0.15rem auto 0 0.5rem; border-top:0.2rem solid #8b998d; background-color:#fff; position:absolute; box-shadow:none; transition:.5s}
	#navbar ul > li.dropdown .dropdown-menu li {line-height:0}
	#navbar ul > li.dropdown .dropdown-menu li a {padding:0; margin-left:1.5rem; display:inline-block; text-align:left}
	#navbar ul > li.dropdown .dropdown-menu li a .submariage {top:0}
	#navbar ul > li.dropdown .dropdown-menu .subdropdown > a span::after {top:0; content: "\2192"}
	#navbar ul > li.dropdown .dropdown-menu .subdropdown:hover .subdropdown-menu {opacity:1; visibility:visible}
	#navbar ul > li.dropdown .dropdown-menu .subdropdown-menu,
	#navbar ul > li.dropdown .dropdown-menu .subdropdown-menu li,
	#navbar ul > li.dropdown .dropdown-menu .subdropdown-menu li a {line-height:normal !important}	
	#navbar ul > li.dropdown .dropdown-menu .subdropdown-menu {top:-1.8rem; padding:1rem 0 1.25rem; left:100%; width:175px; margin-left:.05rem; line-height:1; background:#fff; border-top:.2rem solid #8b998d; box-shadow:0 3px 5px rgba(0,0,0,.05); position:absolute; display:block; opacity:0; visibility:hidden; transition:.7s; z-index:9999}
	#navbar ul > li.dropdown .dropdown-menu .subdropdown-menu li {margin:0 !important; padding:0 !important}
	#navbar ul > li.dropdown .dropdown-menu .subdropdown-menu li a {padding:10px 0 10px 1.5rem !important; margin:0 !important; font-size:12px; text-align:left; display:block}	
	#navbar input[type=checkbox]:checked ~ #menu {padding-top:0}
	#navbar .menu-icon,
	#navbar .display,
	#navbar .social {display:none}
	#booking,
	#phone {display:block}
	#booking > a {margin:0 .65rem 0 .2rem; color:#555; display:inline-flex}
	#booking > a > .booking {font:normal 37px 'Signature'; letter-spacing:.05em; transition:.7s; text-transform:none}
	#booking > a > .booking::after {padding-left:.7rem; top:.2rem; font-size:1.5rem; transition:.7s; color:#777; position:relative; content:"\2192"}
	#booking > a > .booking:hover,
	#booking > a > .booking:hover::after {transform:scale(1.1,1.05); color:#8b998d}
	#phone > a > i {padding:9px 11px; margin:0 2.5rem 0 auto; border-radius:25px; background-color:#8b998d; color:#fff; transition:background 1s ease; display:inline-flex}
	#phone > a > i:hover {background-color:#737f75}}
@media all and (min-width:1200px) {
	#navbar ul {width:95%}
	#navbar ul > li.dropdown .dropdown-menu {margin:-.2rem auto 0 .8rem; width:175px}
	#booking > a {margin:0 .6rem 0 0}
	#booking > a > .booking::after {padding-left:1rem; font-size:1.5rem}
	#phone > a > i {margin:0}}
@media all and (min-width:1359px) {
	#navbar ul {width:93%}
	#navbar ul > li > a {padding:0 1.1rem}
	#navbar ul > li > a,
	#navbar ul > li > a span {letter-spacing:.2em}
	#booking > a {margin:0 1.15rem 0 0}}	
/* -------------------------------------------------------- Logo */
.logo {top:0; padding:0.85rem 1.7rem; line-height:0; flex: 1 0 auto; display: inline-flex; flex-direction: column; position: absolute; z-index:600}
.logo h2 {top:4rem; margin-left:0.2rem; font:normal 9px 'Lato'; letter-spacing: 0.2em; position: absolute}
.logo h3 {font:normal 33px 'Playfair'; letter-spacing: 0.075em; line-height:1.5}
@media all and (min-width:576px) {
	.logo {padding:0.7rem 3.5rem}
	.logo h2 {font-size:11px}
	.logo h3 {font-size:37px; letter-spacing: 0.125em; line-height:1.4}}
@media all and (min-width:1024px) {	
	.logo {padding:1.1rem 3.5rem}
	.logo h2 {top:4.1rem; font-size:9px; letter-spacing: 0.215em}
	.logo h3 {font-size:35px; letter-spacing: 0.05em; line-height:1.3}}
@media all and (min-width:1200px) {	
	.logo {padding:1.1rem 5rem}}	
@media all and (min-width:1359px) {	
	.logo {padding:1.1rem 7.5rem}}		
	
/* =================================================================== */
/* MAIN - Index
/* =================================================================== */					
					
main,
footer {top:0; left:0; position:relative; overflow: hidden}	
/* -------------------------------------------------------- widthPage */					
#widthPage-0,#widthPage-1,#widthPage-2,#widthPage-3,#widthPage-4,#widthPage-5,#widthPage-6,#widthPage-7,#widthPage-8,#widthPage-9,#widthPage-10,#widthPage-11 {width:80%; margin:auto; position:relative}
@media all and (min-width:992px) {
	#widthPage-0,#widthPage-1,#widthPage-2,#widthPage-3,#widthPage-4,#widthPage-5,#widthPage-6,#widthPage-7,#widthPage-8,#widthPage-9,#widthPage-10,#widthPage-11 {width:890px}}	
@media all and (min-width:1200px) {
	#widthPage-0,#widthPage-1,#widthPage-2,#widthPage-3,#widthPage-4,#widthPage-5,#widthPage-6,#widthPage-7,#widthPage-8,#widthPage-9,#widthPage-10,#widthPage-11 {width:1100px}}							
/* -------------------------------------------------------- flexBox */																																											
.flex {width:100%; display:flex; flex-flow: row wrap; align-items:center; justify-content:center; margin:0 auto; position:relative}
@media all and (min-width:992px) {
	.flex {width:100%; flex-flow:nowrap; align-items:flex-start}
	.flexReverse {flex-direction: row-reverse}} 
/* ============= */ 						
.flexOrder-1 {order:1; flex:100%; max-width:100%}
.flexOrder-2 {order:2; flex:100%; max-width:100%}
.flexOrder-3 {order:2; flex:100%; max-width:100%}
.flexOrder-5 {order:1; flex:100%; max-width:100%}
.flexOrder-6 {order:1; flex:100%; max-width:100%}
.flexOrder-7 {order:2; flex:100%; max-width:100%}
.flexOrder-8 {order:1; flex:58%; max-width:58%}
.flexOrder-9 {order:1; flex:42%; max-width:42%}
.flexOrder-10 {order:1; flex:100%; max-width:100%}
.flexOrder-11 {order:2; flex:100%; max-width:100%}
.flexOrder-12 {order:1; flex:100%; max-width:100%}
.flexOrder-13 {order:2; flex:100%; max-width:100%}
.flexOrder-14 {order:1; flex:100%; max-width:100%}
.flexOrder-15 {order:2; flex:100%; max-width:100%}
.flexOrder-16 {order:1; flex:100%; max-width:100%}
.flexOrder-17 {order:2; flex:100%; max-width:100%}
.flexOrder-18 {order:2; flex:100%; max-width:100%}
@media all and (min-width:767px) {
	.flexOrder-8,
	.flexOrder-9 {order:1; flex:31%; max-width:31%}
	.flexOrder-10 {order:1; flex:38%; max-width:38%}}	
@media all and (min-width:992px) {
	.flexOrder-1 {order:1; flex:50%; max-width:50%}
	.flexOrder-2 {order:2; flex:50%; max-width:50%}
	.flexOrder-3 {order:1; flex:58.3333333333%; max-width:58.3333333333%}
	.flexOrder-5 {order:2; flex:41.6666666667%; max-width:41.6666666667%}	
	.flexOrder-6 {order:1; flex:66.6666666667%; max-width:66.6666666667%}
	.flexOrder-7 {order:2; flex:33.3333333333%; max-width:33.3333333333%}
	.flexOrder-8,
	.flexOrder-9,
	.flexOrder-10 {order:1; flex:18.5%; max-width:18.5%}
	.flexOrder-11 {order:1; flex:50%; max-width:50%}
	.flexOrder-12 {order:2; flex:50%; max-width:50%}
	.flexOrder-13 {order:1; flex:25%; max-width:25%}
	.flexOrder-14 {order:2; flex:37.50%; max-width:37.50%}
	.flexOrder-15 {order:2; flex:37.50%; max-width:37.50%}
	.flexOrder-16 {order:2; flex:58.3333333333%; max-width:58.3333333333%}
	.flexOrder-17 {order:1; flex:41.6666666667%; max-width:41.6666666667%}
	.flexOrder-18 {order:2; flex:25%; max-width:25%}
	.flexOrder-19 {order:1; flex:43.5%; max-width:43.5%}}
@media all and (min-width:1200px) {
	.flexOrder-16 {order:2; flex:50%; max-width:50%}
	.flexOrder-17 {order:1; flex:50%; max-width:50%}}	
	
/* -------------------------------------------------------- Parallax 1 - INDEX */	
#parallax-1 {min-height: 36rem; opacity:0.8; filter: grayscale(.2); position: relative; background: url('../img/mariage/parallax-1.webp') no-repeat center center; background-size: cover; background-attachment:fixed}
#parallax-1 .section-1 {min-height: 36rem; width: 100%; background-color: rgba(0,0,0, 0.7); position: relative}
#parallax-1 .section-1 .section-2 {margin:0 auto; top:50%; left:50%; transform: translate(-50%,-50%); color: #fff; text-shadow:1px 1px #777; text-align: center; position:absolute}
#parallax-1 .section-1 .section-2 h2 {margin:1rem 0}
#parallax-1 .section-1 .section-2 h2 span {display:block}
#parallax-1 .section-1 .section-2 h2 span:nth-of-type(1) {font-size:33px; letter-spacing:0.015em; text-transform:none}
#parallax-1 .section-1 .section-2 h2 span:nth-of-type(2) {font-style:italic; font-size:21px; letter-spacing:0.035em; line-height:1; text-transform:none}
#parallax-1 .section-1 .section-2 h2 span:nth-of-type(3) {margin:1.25rem auto -1rem; font-size:22px; letter-spacing:0.05em; width:250px; line-height:1.35; text-transform:none}
#parallax-1 .section-1 .section-2 p {margin:0 auto; font-size:22px; width:300px}
@media all and (min-width:576px) {	
	#parallax-1 .section-1 .section-2 h2 span:nth-of-type(1),
	#parallax-1 .section-1 .section-2 h2 span:nth-of-type(2) {font-size:35px}
	#parallax-1 .section-1 .section-2 h2 span:nth-of-type(3) {margin:1.25rem auto 0; font-size:15px; width:100%}
	#parallax-1 .section-1 .section-2 p {width:340px}}	
/* -------------------------------------------------------- Parallax 2 - INDEX */	
#parallax-2 {min-height: 36rem; opacity:0.8; filter: grayscale(.2); position: relative; background: url('../img/mariage/parallax-2.webp') no-repeat center center; background-size: cover; background-attachment:fixed}
#parallax-2 .section-1 {min-height: 36rem; width: 100%; background-color: rgba(0,0,0, 0.7); position: relative}
#parallax-2 .section-1 .section-2 {margin:0 auto; top:50%; left:50%; transform: translate(-50%,-50%); color: #fff; text-shadow:1px 1px #000; text-align: center; position:absolute}
#parallax-2 .section-1 .section-2 h2 {margin:1rem auto}
#parallax-2 .section-1 .section-2 h2 span {display:block}
#parallax-2 .section-1 .section-2 h2 span:nth-of-type(1) {font-size:15px; letter-spacing:0.035em; line-height:1}
#parallax-2 .section-1 .section-2 h2 span:nth-of-type(2) {font-size:33px; letter-spacing:0.035em; line-height:1}
#parallax-2 .section-1 .section-2 p {margin:0 auto; font-size:22px; width:320px}
@media all and (min-width:576px) {	
	#parallax-2 .section-1 .section-2 h2 span:nth-of-type(1) {font-size:25px; display:inline-block}
	#parallax-2 .section-1 .section-2 h2 span:nth-of-type(2) {font-size:25px; line-height:1.35}
	#parallax-2 .section-1 .section-2 p {width:370px}}		
/* -------------------------------------------------------- Parallax 3 - MARIAGE */	
#parallax-3 {min-height: 36rem; opacity:0.8; filter: grayscale(.2); position: relative; background: url('../img/mariage/parallax-3.webp') no-repeat center center; background-size: cover; background-attachment:fixed}
#parallax-3 .section-1 {min-height: 36rem; width: 100%; background-color: rgba(0,0,0, 0.7); position: relative}
#parallax-3 .section-1 .section-2 {margin:0 auto; top:50%; left:50%; transform: translate(-50%,-50%); color: #fff; text-shadow:1px 1px #777; text-align: center; position:absolute}
#parallax-3 .section-1 .section-2 h2 {margin:1rem 0}
#parallax-3 .section-1 .section-2 h2 span {display:block}
#parallax-3 .section-1 .section-2 h2 span:nth-of-type(1),
#parallax-3 .section-1 .section-2 h2 span:nth-of-type(2) {font-style:italic; font-size:31px;  letter-spacing:0.015em; line-height:0.9; text-transform:none}
#parallax-3 .section-1 .section-2 h2 span:nth-of-type(3) {margin-top:0.3rem; font:normal 13px 'Lato'; letter-spacing:0.1em}
#parallax-3 .section-1 .section-2 p {margin:0 auto; font-size:21px; width:270px}
@media all and (min-width:576px) {	
	#parallax-3 .section-1 .section-2 h2 span:nth-of-type(1),
	#parallax-3 .section-1 .section-2 h2 span:nth-of-type(2) {font-size:39px}
	#parallax-3 .section-1 .section-2 h2 span:nth-of-type(3) {margin:0.5rem 0 1rem; font-size:15px}
	#parallax-3 .section-1 .section-2 p {font-size:23px; width:380px}}	
/* -------------------------------------------------------- Parallax 4 - MARIAGE */	
#parallax-4 {min-height: 36rem; opacity:0.9; filter: grayscale(0.25); position: relative; background: url('../img/mariage/parallax-4.webp') no-repeat center center; background-size: cover; background-attachment:fixed}
#parallax-4 .section-1 {min-height: 36rem; width: 100%; background-color: rgba(0,0,0, 0.7); position: relative}
#parallax-4 .section-1 .section-2 {margin:0 auto; top:50%; left:50%; transform: translate(-50%,-50%); color: #fff; text-shadow:1px 1px #000; text-align: center; position:absolute}
#parallax-4 .section-1 .section-2 h2 {margin:1rem auto}
#parallax-4 .section-1 .section-2 h2 span {display:block}
#parallax-4 .section-1 .section-2 h2 span:nth-of-type(1) {font:normal 21px 'Lato'; letter-spacing:0.02em; line-height:1.5}
#parallax-4 .section-1 .section-2 h2 span:nth-of-type(2) {font-size:20px; letter-spacing:0.025em; text-transform:none}
#parallax-4 .section-1 .section-2 p {margin:0 auto; font-size:21px; width:320px}
@media all and (min-width:576px) {	
	#parallax-4 .section-1 .section-2 h2 {margin:1.5rem auto}
	#parallax-4 .section-1 .section-2 h2 span:nth-of-type(1) {font-size:23px}
	#parallax-4 .section-1 .section-2 h2 span:nth-of-type(2) {font-size:22px}
	#parallax-4 .section-1 .section-2 p {font-size:22px; width:380px}}
/* -------------------------------------------------------- Parallax 5 - PRESTATION */	
#parallax-5 {min-height: 36rem; opacity:0.8; filter: grayscale(.2); position: relative; background: url('../img/mariage/parallax-5.webp') no-repeat center center; background-size: cover; background-attachment:fixed}
#parallax-5 .section-1 {min-height: 36rem; width: 100%; background-color: rgba(0,0,0, 0.7); position: relative}
#parallax-5 .section-1 .section-2 {margin:0 auto; top:50%; left:50%; transform: translate(-50%,-50%); color: #fff; text-shadow:1px 1px #777; text-align: center; position:absolute}
#parallax-5 .section-1 .section-2 h2 {margin:1rem 0}
#parallax-5 .section-1 .section-2 h2 span {display:block}
#parallax-5 .section-1 .section-2 h2 span:nth-of-type(1),
#parallax-5 .section-1 .section-2 h2 span:nth-of-type(2) {font-style:italic; font-size:29px;  letter-spacing:0.015em; line-height:1.1; text-transform:none}
#parallax-5 .section-1 .section-2 p {margin:0 auto; font-size:20px; width:300px}
@media all and (min-width:576px) {	
	#parallax-5 .section-1 .section-2 h2 span:nth-of-type(1),
	#parallax-5 .section-1 .section-2 h2 span:nth-of-type(2) {font-size:35px}
	#parallax-5 .section-1 .section-2 p {font-size:23px; width:380px}}
@media all and (min-width:992px) {	
	#parallax-5 {margin-top:-5.5rem; z-index:-1}}	
@media all and (min-width:1200px) {	
	#parallax-5 {margin-top:-8rem}}	
/* -------------------------------------------------------- Parallax 6 - CHOIX */	
#parallax-6 {min-height: 36rem; opacity:0.8; filter: grayscale(.2); position: relative; background: url('../img/mariage/parallax-6.webp') no-repeat center center; background-size: cover; background-attachment:fixed}
#parallax-6 .section-1 {min-height: 36rem; width: 100%; background-color: rgba(0,0,0, 0.7); position: relative}
#parallax-6 .section-1 .section-2 {margin:0 auto; top:50%; left:50%; transform: translate(-50%,-50%); color: #fff; text-shadow:1px 1px #777; text-align: center; position:absolute}
#parallax-6 .section-1 .section-2 h2 {margin:1rem 0}
#parallax-6 .section-1 .section-2 h2 span {display:block}
#parallax-6 .section-1 .section-2 h2 span:nth-of-type(1),
#parallax-6 .section-1 .section-2 h2 span:nth-of-type(2) {font-style:italic; font-size:27px; letter-spacing:0.025em; line-height:1.2; text-transform:none}
#parallax-6 .section-1 .section-2 p {margin:0 auto; width:300px}
@media all and (min-width:576px) {	
	#parallax-6 .section-1 .section-2 h2 span:nth-of-type(1),
	#parallax-6 .section-1 .section-2 h2 span:nth-of-type(2) {font-size:32px}
	#parallax-6 .section-1 .section-2 p {width:410px}}	
/* -------------------------------------------------------- Parallax 7 */	
#parallax-7 {min-height: 30rem; opacity:0.8; filter: grayscale(.2); position: relative; background: url('../img/mariage/parallax-6.webp') no-repeat center center; background-size: cover; background-attachment:fixed}
#parallax-7 .section-1 {min-height: 30rem; width: 100%; background-color: rgba(0,0,0, 0.7); position: relative}
#parallax-7 .section-1 .section-2 {margin:0 auto; top:50%; left:50%; transform: translate(-50%,-50%); color: #fff; text-shadow:1px 1px #777; text-align: center; position:absolute}
#parallax-7 .section-1 .section-2 h2 {margin:1rem 0}
#parallax-7 .section-1 .section-2 h2 span {display:block}
#parallax-7 .section-1 .section-2 h2 span:nth-of-type(1),
#parallax-7 .section-1 .section-2 h2 span:nth-of-type(2) {font-style:italic; font-size:23px; letter-spacing:0.02em; line-height:1.2; text-transform:none}
#parallax-7 .section-1 .section-2 p {margin:0 auto; width:300px}
@media all and (min-width:576px) {	
	#parallax-7 .section-1 .section-2 h2 span:nth-of-type(1),
	#parallax-7 .section-1 .section-2 h2 span:nth-of-type(2) {font-size:32px}
	#parallax-7 .section-1 .section-2 p {width:410px}}			
/* -------------------------------------------------------- PARALLAX 8 - About */															
#parallax-8 {min-height:25rem; position: relative; background: url('../img/info/parallax-8.webp') no-repeat center center; background-size: cover; background-attachment:fixed; width: 100%; text-align: center; margin-right: auto; margin-left: auto; position: relative; overflow: hidden}	
#parallax-8 span {font:normal 70px 'Signature'; letter-spacing:0.035em; top:38%; left: 50%; transform: translate(-50%, -62%);  text-decoration: underline solid #8b998d; color:#8b998d; width:100%; position: absolute; text-transform:none}																		
#parallax-8 h2 {font:700 22px 'Cormorant'; top:55%; left: 50%; transform: translate(-50%, -45%); width:100%; position: absolute}																		
#parallax-8 h3 {font:italic 21px 'Cormorant'; letter-spacing:0.02em; top:65%; left: 50%; transform: translate(-50%, -35%); width:100%; position: absolute; text-transform:none}																												
@media all and (min-width:576px) {
	#parallax-8 span {font-size:90px}																		
	#parallax-8 h2 {font-size:31px}																		
	#parallax-8 h3 {font-size:29px}}	
/* -------------------------------------------------------- Parallax 9 - EXP */	
#parallax-9 {min-height:36rem; opacity:0.8; position: relative; background: url('../img/mariage/parallax-9.webp') no-repeat center center; background-size: cover; background-attachment:fixed}
#parallax-9 .section-3 {min-height:36rem; width: 100%; background-color: rgba(0,0,0, 0.7); position: relative}
#parallax-9 .section-3 .section-4 {margin:0 auto; color: #fff; text-shadow:1px 1px #777; text-align: center}
#parallax-9 .section-3 .section-4 h2 {padding-top:5.5rem; font-size:22px; letter-spacing:0.05em}
#parallax-9 .section-3 .section-4 .spanLine {margin:1.5rem auto 2rem; width:80px; height:2px; background-color: #8b998d; position:relative}
#parallax-9 .section-3 .section-4 p {margin:0 auto; width:300px}
#parallax-9 .section-3 .section-4 a.btn {margin-top:2.5rem; width:280px; text-align:center; display: table}
@media all and (min-width:576px) {	
	#parallax-9 .section-3 .section-4 h2 {padding-top:7.5rem}
	#parallax-9 .section-3 .section-4 .spanLine {margin:1.75rem auto 2.25rem}
	#parallax-9 .section-3 .section-4 p { width:650px}
	#parallax-9 .section-3 .section-4 a.btn {margin-top:3rem}}	
/* -------------------------------------------------------- PARALLAX 10 - CHER */															
#parallax-10 {min-height:25rem; position: relative; background: url('../img/mariage/parallax-1.webp') no-repeat center center; background-size: cover; background-attachment:fixed; width: 100%; text-align: center; margin-right: auto; margin-left: auto; position: relative; overflow: hidden}	
#parallax-10 .section-1 {min-height:25rem; width: 100%; background-color: rgba(0,0,0, 0.55); color:rgba(252,252,252, 0.85); position: relative}
#parallax-10 span {font:normal 50px 'Signature'; letter-spacing:0; top:39%; left: 50%; transform: translate(-50%, -61%);  text-decoration: underline solid #8b998d; color:#8b998d; width:100%; position: absolute; text-transform:none}																		
#parallax-10 h2 {font:700 25px 'Cormorant'; letter-spacing:0.025em; top:55%; left: 50%; transform: translate(-50%, -45%); width:100%; position: absolute}																		
#parallax-10 h3 {font:italic 21px 'Cormorant'; letter-spacing:0.01em; top:63.5%; left: 50%; transform: translate(-50%, -36.5%); width:100%; position: absolute; text-transform:none}																												
@media all and (min-width:576px) {
	#parallax-10 span {font-size:60px}																		
	#parallax-10 h2 {font-size:30px}																		
	#parallax-10 h3 {font-size:25px; top:65%; transform: translate(-50%, -35%)}}		
/* -------------------------------------------------------- Témoignages */
.testimonials {padding-top:4rem; margin: 0 auto; width: 100%; text-align:center; z-index:0; position: relative; clear: both}
.test-one {margin-top:2.5rem}
.test-one h2 {margin-left:-0.75rem; font:normal 30px 'Cormorant'; letter-spacing:0; line-height:1.3; font-style:italic; text-transform:none}
.test-one p.h3 span {font:normal 33px 'Playfair'; letter-spacing:0.03em; line-height:1.05; display:block}
.test-one .line {margin:1.75rem auto 0; width:2px; height:50px; background-color: #8b998d; position:relative}	
.test-one .text {margin-top:1.25rem}
.test-one .text p.text1 {margin: 0 auto; width:310px; letter-spacing:0.01em; line-height:1.35}
.test-one .text p.answer {margin-top:1.25rem; font:normal 32px 'Signature'; letter-spacing:0.02em}
.test-one .avis a.btn {margin-top:2rem; width:300px; text-align:center; display: table}
.test-one .avis a.btn__testi {display: none}
.test-two {width:100%; position: relative; display: inline-block; overflow: hidden}
.test-two img {width:100%; vertical-align: top; backface-visibility: hidden}
@media all and (min-width:576px){
	.testimonials {padding-top:5rem}
	.test-one {margin-top:3.5rem}
	.test-one h2 {font-size:29px; line-height:1.2}
	.test-one p.h3 span {font-size:35px}
	.test-one .text p.text1 {width:410px; letter-spacing:0.1em; line-height:1.5}
	.test-one .text p.answer {margin-top:1.5rem; font-size:35px}}
@media all and (min-width:992px){	
	.testimonials {padding:5rem 0 1rem; text-align:left}
	.test-one {margin-top:1.25rem}
	.test-one h2 {font-size:30px; margin-left:0; line-height:1.5}
	.test-one p.h3 {padding-bottom:2.35rem; border-bottom:1px solid #8b998d; width:95%}
	.test-one p.h3 span {line-height:1.05; text-transform:uppercase; text-align: left; display:block}
	.test-one p.h3 span:nth-of-type(2) {font-size:35px}
	.test-one .line {display:none}	
	.test-one .text {padding:0.5rem 0 1.75rem; background-color:transparent}
	.test-one .text p.text1 {margin: 0 auto 0 0; width:95%; font-size:21px; letter-spacing:0.025em; text-align: justify}
	.test-one .text p.answer {margin-top:1.15rem; font:italic 20px 'Cormorant'; letter-spacing:0.05em; text-align: left}
	.test-one .avis a.btn  {display: none}
	.test-one .avis a.btn__testi {margin: 0 auto; width: 100%; position: relative; display:block}	
	.test-one .avis a.btn__testi span {font:normal 32px 'Signature'; letter-spacing:0.02em; transition: .7s; text-transform:none}	
	.test-one .avis a.btn__testi span::after {top:3px; padding-left:0.7rem; font-size:1.5rem; transition: .7s; color:#636363; content: "\2192"; position: relative}
	.test-one .avis a.btn__testi span:hover,
	.test-one .avis a.btn__testi span:hover::after {margin-left:0.5rem; transform: scale(1.1); color: #8b998d}		
	.test-two img {width:400px; margin: 0 -1.5rem 0 auto; flex-direction: row-reverse; display: flex}}
@media all and (min-width:1200px){	
	.test-one {margin-top:1.5rem}
	.test-one p.h3 {padding-bottom:3rem}
	.test-one .text {padding:1rem 0 2.25rem}
	.test-one .text p.text1 {line-height:1.6}
	.test-one .text p.answer {margin-top:1.5rem}
	.test-one .avis a.btn__testi span {font-size:40px}
	.test-two img {width:420px; margin-right:1rem}}
/* -------------------------------------------------------- AVANT - APRES */
.beforeAfter {padding:2.75rem 0 1rem; text-align:center; background-color:#f7f5ef; position: relative; z-index:1; clear: both}
.beforeAfter h2 {margin-bottom:2.5rem}
.beforeAfter h2 span {display:block}
.beforeAfter h2 > span:nth-of-type(1) {font:normal 15px 'Lato'; letter-spacing:0.1em; opacity:0.8; line-height:1.8}
.beforeAfter h2 > span:nth-of-type(2) {font:normal 30px 'Playfair'; letter-spacing:0.025em}
.beforeAfter h3 {padding:1rem 0 2.5rem; font-size:16px; letter-spacing:0.05em; text-transform:none}
#before_after_A,	
#before_after_B {margin:0 auto; max-width:100%; width: 100%}
.twentytwenty-handle::before, 
.twentytwenty-handle::after {width:3px; height: 9999px; left: 50%; margin-left: -1.6px; background-color:#fff; box-shadow: 0 0 7px #d7d7d7; z-index: 30; position: absolute; content: ""; display: block}
.twentytwenty-before-label, 
.twentytwenty-after-label, 
.twentytwenty-overlay {top: 0; width: 100%; height: 100%; position: absolute}
.twentytwenty-before-label, 
.twentytwenty-after-label, 
.twentytwenty-overlay {transition-duration: 0.5s}
.twentytwenty-before-label, 
.twentytwenty-after-label {transition-property: opacity}
.twentytwenty-before-label::before, 
.twentytwenty-after-label::before {color:rgba(255,255,255,0.8); font-size:12px; letter-spacing: 0.1em}
.twentytwenty-before-label::before, 
.twentytwenty-after-label::before {padding: 0 20px; margin-top: -19px; top: 50%; line-height:2.5; background-color: rgba(255,255,255,0.3); border-radius: 2px; position: absolute}
.twentytwenty-left-arrow, 
.twentytwenty-right-arrow {margin-top: -6px; top: 50%; width: 0; height: 0; border: 6px inset transparent; position: absolute}
.twentytwenty-container {box-sizing: content-box; overflow: hidden; position: relative}
.twentytwenty-container * {box-sizing: content-box}
.twentytwenty-container img {top: 0; position: absolute; display: block}
.twentytwenty-container.active .twentytwenty-overlay, 
.twentytwenty-container.active:hover.twentytwenty-overlay {background-color: rgba(0,0,0,0)}
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, 
.twentytwenty-container.active:hover.twentytwenty-overlay .twentytwenty-before-label,
.twentytwenty-container.active:hover.twentytwenty-overlay .twentytwenty-after-label,
.twentytwenty-before-label,
.twentytwenty-after-label {opacity: 0}
.twentytwenty-before-label::before {left:7px; content: "Avant"}
.twentytwenty-after-label::before {right:7px; content: "Après"}
.twentytwenty-overlay {transition-property: background; background-color: rgba(0,0,0,0); z-index: 25}
.twentytwenty-overlay:hover {background-color: rgba(0,0,0,0.5)}
.twentytwenty-overlay:hover .twentytwenty-after-label,
.twentytwenty-overlay:hover .twentytwenty-before-label {opacity: 1}
.twentytwenty-before {z-index: 20}
.twentytwenty-after {z-index: 10}
.twentytwenty-handle {height:30px; width:30px; left: 50%; top: 50%; margin-left:-15px; margin-top: -15px; background-color:#fff; border-radius: 1000px; box-shadow: 0 0 7px rgba(0,0,0,0.25); z-index: 40; position: absolute; cursor:pointer}
.twentytwenty-handle::before {bottom: 50%; margin-bottom: 15px; box-shadow: 0 3px 0 #fff}
.twentytwenty-handle::after {top: 50%; margin-top: 15px; box-shadow: 0 -3px 0 #fff}
.twentytwenty-left-arrow {top:16px; left: 50%; margin-left: -15px; border-right:9px solid #535353}
.twentytwenty-right-arrow {top:16px; right: 50%; margin-right: -15px; border-left:9px solid #535353}									
@media all and (min-width:576px) {						
	.beforeAfter {padding:3.75rem 0 0.5rem}
	.beforeAfter h2 {margin-bottom:3.5rem}
	.beforeAfter h2 > span:nth-of-type(1) {font-size:18px}
	.beforeAfter h2 > span:nth-of-type(2) {font-size:37px}
	.beforeAfter h3 {padding:1.5rem 0 3.95rem; font-size:21px}}
@media all and (min-width:992px) {	
	.befAft-nth:nth-of-type(1) {margin-right:0.5rem}
	.befAft-nth:nth-of-type(2) {margin-left:0.5rem}}	

/* =================================================================== */
/* FOOTER - Section
/* =================================================================== */
	
footer {width:100%; background-color: #fff; z-index:1}
/* -------------------------------------------------------- section Instagram */	
.footerInsta {padding-top:1.25rem; width:100%; position: relative; text-align:center}					
.footerInsta .imgInsta {width:100%; position: relative}	
.footerInsta .imgInsta h2 {left:50px; bottom:38px; right:100%; transform-origin: right bottom; white-space: nowrap; transform: rotate(-90deg); display: flex; position: absolute; z-index:5}
.footerInsta .imgInsta h2 span:nth-of-type(1) {font:normal 16px 'Lato'; letter-spacing:0.1em; color:#777; text-transform:none; display:inline-flex; position: relative; transition: all 0.34s ease-in-out}
.footerInsta .imgInsta h2 span:nth-of-type(2) {font:normal 16px 'Lato'; letter-spacing:0.05em; color:#777; text-transform:none; display:inline-flex; position: relative; transition: all 0.34s ease-in-out}
.footerInsta .imgInsta h2 span:nth-of-type(2):hover {transform: scale(1.1); transition: all 0.3s ease-in-out}
.footerInsta .imgInsta h3 {padding:5px 30px 7px; top:50%; left:50%; transform: translate(-50%, -50%); box-shadow: 4px 4px 5px -2px rgba(0,0,0,0.35); background-color:rgba(255,255,255,0.85); text-align: center; position: absolute; display:none; border-radius:1px; z-index:3}
.footerInsta .imgInsta h3 a {font:normal 32px 'Signature'; letter-spacing:0.02em; text-transform:none; display:inline-flex; position: relative; transition: all 0.34s ease-in-out}
.footerInsta .imgInsta h3 a:hover {transform: scale(1.1); transition: all 0.3s ease-in-out}				
.footerInsta .imgInsta img {width:100%; padding:2.5rem 2.5rem 2rem 3.6rem; position:relative; z-index:-1}
.footerInsta .imgInsta .visibleS,
.footerInsta .imgInsta .visibleM,
.footerInsta .imgInsta .visibleL {display:none}
@media all and (min-width:576px) {	
	.footerInsta .imgInsta h2 {left:55px; bottom:55px}
	.footerInsta .imgInsta h2 span:nth-of-type(1),
	.footerInsta .imgInsta h2 span:nth-of-type(2) {font-size:18px}
	.footerInsta .imgInsta img {padding:3rem 4rem 2rem}}
@media all and (min-width:767px) {	
	.footerInsta {padding-top:3.95rem}	
	.footerInsta .imgInsta h2 {display:none}
	.footerInsta .imgInsta h3 {display:inline-block}
	.footerInsta .imgInsta .viewport_BG {display:none}
	.footerInsta .imgInsta img {width:27%; padding:5px 3px 2rem}
	.footerInsta .imgInsta .visibleS {display:inline}}	
@media all and (min-width:992px) {	
	.footerInsta .imgInsta img {width:16%; padding:5px 3px 0}	
	.footerInsta .imgInsta .visibleM {display:inline}}	
@media all and (min-width:1200px) {
	.footerInsta .imgInsta img {padding:8px}}
@media all and (min-width:1359px) {
	.footerInsta .imgInsta img {width:13%}
	.footerInsta .imgInsta .visibleL {display:inline}}	
/* -------------------------------------------------------- section Contact */
.footer {padding-bottom:3.5rem; text-align:left; position: relative; z-index:5; clear: both}
.footer .contact {margin-bottom:3rem}
.footer .contact h2 span {text-align:center; display:block}
.footer .contact h2 span:nth-of-type(1) {font:normal 31px 'Playfair'; letter-spacing:0.025em; line-height:2.1; color:#3e3e3e}
.footer .contact h2 span:nth-of-type(2) {font:normal 20px 'Lato'; letter-spacing:0.25em; line-height:0; color:#aaa}
.footer .contact > div {padding-bottom:0.2em; margin:1.5rem auto 1.75rem; left:45%; transform: translateX(-55%); position: relative}
.footer .contact .inline-block {width:60px; display: inline-block; border-bottom:2px solid #d1c286}
.footer .contact .inline-block::after {margin-left:2rem; width:60px; border-bottom:2px solid #d1c286; display: block; content: ""}
.footer .contact p {text-align:justify}
.footer .contact p.karine {padding-bottom:2.5rem}
.footer a.btn {width:100%; text-align:center; display: table}
.footer h3 {padding-bottom:0.35rem}
.footer h3 span {font:normal 43px 'Signature'; letter-spacing:0.02em; text-transform:none}
.footer h3 .h3-one {margin-left:-0.25rem}
.footer h3 .h3-two {margin-left:-0.25rem}
.footer h3 .h3-three {margin-left:-0.5rem}
.footer ul {list-style: none}
.footer ul li {font:normal 12px 'Lato'; letter-spacing:0.075em; line-height:3; position: relative}
.footer ul li > a:hover {color: #d1c286}
.footer .links {padding-left:0.7rem}
.footer .phone {padding-left:0.7rem; padding-top:2.25rem; position:relative}
.footer .phone ul li {font:normal 19px 'Cormorant'; letter-spacing: 0.035em; line-height: 1.65; text-transform: none; hyphens: auto; word-wrap: break-word}
.footer .phone #phoneNumber {padding-top:0.6rem}
.footer .phone #phoneNumber > a {margin-left:0.2rem; display: inline-flex}	
.footer .phone #phoneNumber > a > span {font:normal 16px 'Lato'; letter-spacing:0.05em; transition: .7s}	
.footer .phone #phoneNumber > a > span::after {top:3px; padding-left:0.7rem; font-size:1.5rem; transition: .7s; color:#636363; content: "\2192"; position: relative}
.footer .phone #phoneNumber > a > span:hover,
.footer .phone #phoneNumber > a > span:hover::after {margin-left:0.5rem; transform: scale(1.1); color: #d1c286}	
@media all and (min-width:576px) {
	.footer .contact h2 span:nth-of-type(1) {font-size:37px; letter-spacing:0.05em}
	.footer .contact h2 span:nth-of-type(2) {font-size:22px}}	
@media all and (min-width:767px) {
	.footer .contact {margin-bottom:2.5rem}
	.footer .contact > div {margin:2.25rem auto 2.5rem}
	.footer h3 {padding-bottom:0}
	.footer .phone {padding-left:0; padding-top:0}
	.footer a.btn {margin-bottom:0.5rem}}		
@media all and (min-width:992px) {
	.footer {padding:4.5rem 0 3.5rem}
	.footer .contact {margin-top:-2.25rem; margin-bottom:0}	
	.footer .contact h2 {padding-bottom:2.35rem; width:340px; border-bottom:1px solid #d1c286}
	.footer .contact h2 span {text-align:left}
	.footer .contact h2 span:nth-of-type(1) {font-size:32px}
	.footer .contact > div,
	.footer .contact .inline-block,
	.footer .contact .inline-block::after  {display: none}
	.footer .contact p.karine {padding:1.25rem 0 1.5rem; width:340px; font-size:17px; letter-spacing:0; line-height:1.35}
	.footer h3 {margin-top:0rem}
	.footer ul {margin-top:0.5rem}
	.footer a.btn {padding:10px 0; margin:0 auto 0 0; width:180px; line-height:1.3}
	.footer a.btn span {font-size:12px}
	.footer a.btn i {top:11px}	
	.footer .links {padding-left:0}
	.footer .phone {padding-top:0}
	.footer .phone ul li {margin-top:0.3rem; font-size:17px; letter-spacing: 0.05em; line-height: 1.35}
	.footer .phone #phoneNumber {padding-top:0}
	.footer .phone #phoneNumber > a > span {font-size: 15px}}
@media all and (min-width:1200px) {	
	.footer {padding:4.5rem 0 3.95rem}
	.footer .contact h2,
	.footer .contact p.karine {width:380px}}
/* -------------------------------------------------------- section Copyright */	
.footerCopy {padding:1rem 0; margin:0 auto; color:#555; background-color:rgba(237,236,230,0.5)}						
.footerCopy p {font-size:12px; letter-spacing:0.1em; line-height:1.7; text-align:center; text-transform:uppercase}	
.footerCopy p .date {font-size:14px}		 
.footerCopy p .link {display:block}
.footerCopy p .link a,
.footerCopy p a {font-size:100%; border-bottom:1px dotted #777; text-transform:uppercase}	
@media all and (min-width:576px) {						
	.footerCopy p {font-size:13px; margin:0 auto; width:500px}	
	.footerCopy p .date {font-size:16px}
	.footerCopy p .link {display:inline-block}}
@media all and (min-width:992px) {
	.footerCopy {padding:0.75rem 0}
	.footerCopy p {font-size:12px; width:100%}}	
/* -------------------------------------------------------- Back to Top Button */
#back-to-top {bottom:3.5rem; right:0.5rem; width:36px; height:36px; transform:translateY(18px); border-radius:50%; background-color:#8b998d; color: #fff; border: none; transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease; display: flex; align-items: center; justify-content: center; position: fixed; z-index: 998; cursor: pointer; opacity: 0; visibility: hidden}
#back-to-top i {margin-bottom:0.2rem; font-size:1rem}
#back-to-top i::after {display: inline-block; content: "\2191"; transition: all .15s ease-out}
#back-to-top i:hover::after {transform: translateY(-7px)}
#back-to-top.visible {opacity: 1; visibility: visible; transform: translateY(0)}
@media all and (min-width:576px) {	
	#back-to-top {width:50px; height:50px; transform:translateY(25px)}
	#back-to-top i {font-size:1.2rem}}
@media all and (min-width:992px) {	
	#back-to-top {bottom:1.5rem; right:1.5rem}}
	
/* =================================================================== */
/* Merci - Section
/* =================================================================== */	

.thank {display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; color:#434343; width:100%; height:100vh}
.thank .thank_svg {width:50px; position: relative; display:inline-block}
.thank .thankyou {text-align:center}
.thank .thankyou h3 {font-size:50px}
.thank .thankyou p.redirect {margin-top:2rem; line-height:1.8; text-align:center}
.thank .thankyou p.redirect a {font:normal 19px 'Playfair'; letter-spacing:0.025em; border-bottom:none}
.thank .thankyou p.redirect a:hover {border-bottom:1px dotted #d1c286; color:#d1c286}
.thank .thankyou p.redirect .numberCircle {margin:0.8rem 0.35rem 0; font-size:21px; color:#fff; border-radius:50%; width:3rem; height:3rem; line-height:2; background-color:#d1c286; display: inline-block}																			
@media all and (min-width:578px) {	
	.thank .thankyou p.redirect a {font-size:25px}}
@media all and (min-width:992px) {	
	.thank {margin-top:-2rem}
	.thank .thankyou p.redirect a {border-bottom:1px dotted #555; color:#333}
	.thank .thankyou p.redirect .numberCircle {margin:1.5rem 0.35rem 0}}	
		
/* =================================================================== */
/* FONT - Section
/* =================================================================== */		
									
.fa {display:inline-flex; font:normal normal normal 15px/1 FontAwesome; font-size:inherit; text-rendering:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
.fa-volume-control-phone::before {content: "\f2a0"}
.fa-facebook-f::before {content: "\f09a"}
.fa-instagram::before {content: "\f16d"}
.fa-linkedin::before {content: "\f0e1"}	
.fa-envelope::before {content:"\f0e0"}
.fa-arrow::before {content:"\2192"}
.fa-comment::before {content: "\f075"; color:#ece9e0; text-shadow: -1px 0 #8b998d, 0 1px #8b998d, 1px 0 #8b998d, 0 -1px #8b998d}
.fa-checks::before {content: "\f00c"; color:#f2f2f2; text-shadow: -1px 0 #8b998d, 0 1px #8b998d, 1px 0 #8b998d, 0 -1px #8b998d}