@font-face {font-family: "heading-font"; src: url("../fonts/Saveur-Sans-Regular.woff") format('woff');}
@font-face {font-family: "heading-script"; src: url("../fonts/GreatVibes-Regular.woff") format('woff');}
@font-face {font-family: "regular-font"; src: url("../fonts/Helvetica-Condensed.woff") format('woff');}


a, a:hover {text-decoration:none;}  
h1,h2,h3,h4 {font-family: 'heading-font', Arial, Helvetica, sans-serif; letter-spacing: 4px;} 
p {line-height:1.5em; color:#333e48;}
ul, li, ol {list-style-type:none; margin-left:0px; padding-left:0px;}
h1, h2, h3, h4 {text-transform:uppercase; font-weight:normal;}
h1 {font-size:2em;}
h2 {font-size:1.4em;}
img {border:0px; margin:0px; padding:0px; outline:none; position:relative;}


table,td,tr {border:0px;}
    
body {height: 60vh; margin:0px; padding:0px; font-family: 'regular-font', Arial, Helvetica, sans-serif; font-size:22px;}
.content {max-width:1280px; margin:0px auto;position:relative; z-index:5; display: block;}
.content .content-left {float:left; width:48%; position:relative;}
.content .content-right {float:right; width:48%; position:relative;}
.content .content-clear {clear:both; display:block;}

header {position:fixed; width:100%; top:0px; left:0px; z-index:99;}
.header {transition: all 0.2s ease-in-out;background-color:transparent;}
.header.active {background: #333e48;}
header .brand {float:left; margin:10px 22px 0px 22px;}
header nav {float:right;}
header nav ul {margin:61px 22px 0px 0px; padding:0px; }
header nav ul li {margin:0px; padding:0px; display:inline-block;}
header nav ul li a{text-decoration:none; text-transform:uppercase; letter-spacing:3px; font-family: 'heading-font', Arial, Helvetica, sans-serif; font-size:0.8em; color:#ba8f6b; padding:2px 12px; transition: color 0.5s;}
header nav ul li a:hover,header nav ul li a.active {text-decoration:none; color:#ffffff;}
header nav ul li.calendrier-pech-memoria a {display:block; background-image:url('../img/calendrier.png'); background-size: 100%; font-size: 0.6em; width: 50px; padding: 24px 0px; letter-spacing: 0px; text-align: center; background-repeat: no-repeat;}

/* --------- MENU --------- */



#menuToggle {display: none; position: absolute; top: 76px; right: 76px; z-index: 100; -webkit-user-select: none; user-select: none;}

#menuToggle a { text-decoration: none; color: #e0e0e0; transition: color 0.3s ease; text-transform:uppercase; font-size:18px; letter-spacing:8px;}
#menuToggle a:hover {color: #ba8f6b;}

#menuToggle input{display: block; width: 40px; height: 32px; position: absolute; top: -7px; left: -5px; cursor: pointer; opacity: 0; z-index: 2; -webkit-touch-callout: none;}
#menuToggle span {display: block; width: 28px; height: 3px; margin-bottom: 5px; position: relative; background: #e0e0e0; border-radius: 3px; z-index: 1; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;}
#menuToggle span:first-child {transform-origin: 0% 0%;}
#menuToggle span:nth-last-child(2)
{ transform-origin: 0% 100%; }
#menuToggle input:checked ~ span {opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: #ffffff; }
#menuToggle input:checked ~ span:nth-last-child(3) {opacity: 0; transform: rotate(0deg) scale(0.2, 0.2);}
#menuToggle input:checked ~ span:nth-last-child(2) {transform: rotate(-45deg) translate(0, -1px);}
  
#menu{position: absolute; width: 330px; height:1400px; margin: -110px 0 0 -320px; padding: 50px 100px 50px 50px; background: #333e48; list-style-type: none; -webkit-font-smoothing: antialiased; transform-origin: 50% 0%; transform: translate(420px, 0px); transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);}

#menu li {padding: 18px 0; border-top: 1px dotted #666666}
#menu h2 {display:block; position:relative; color:#ba8f6b; }
#menuToggle input:checked ~ ul{transform: none;}



/* ----------- SLIDER ------------ */

img {width: 100%;}
.height {height: 10px;}
          
.image-container { max-width: 800px; position: relative; margin: auto;}

.image-container img{opacity:1; animation:myship3 2s; -moz-animation:myship3 2s; -webkit-animation:myship3 2s;}
@keyframes myship3 {from {opacity:0;} to{opacity:1;} }
@-moz-keyframes myship3 {from {opacity:0;} to{opacity:1;}}
@-webkit-keyframes myship3 {from {opacity:0;} to{opacity:1;} }

.next {right:-70px; }
 .previous {left:-62px;}         
.previous, .next { cursor: pointer; position: absolute; bottom: -10px; padding: 10px 10px; margin-top: -25px; width:77px;}
.previous:hover, .next:hover {padding: 10px 0px;}
.slideNumber {display:none;}





.contact-instant {position:fixed; right:-120px; top:400px; transform: rotate(270deg); z-index:99;}
.contact-instant a{display:block; background-color:#ba8f6b; text-transform:uppercase; letter-spacing:4px; font-family: 'heading-font', Arial, Helvetica, sans-serif; color:#ffffff; padding:20px 42px; transition: background-color 0.5s;}
.contact-instant a:hover{background-color:#666666; text-transform:uppercase; letter-spacing:4px; font-family: 'heading-font', Arial, Helvetica, sans-serif; color:#ffffff;}

section {min-height: 100vh;}

.reveal{ position: relative; transform: translateY(150px); opacity: 0; transition: 1s all ease; }
.reveal.active{ transform: translateY(0); opacity: 1; }

.reveal1{position: relative; transform: translateY(200px); opacity: 0; transition: 2s all ease;}
.reveal1.active1{transform: translateY(0);opacity: 1;}

.reveal-intro-titre{top:320px; animation:myship 2s; -moz-animation:myship 2s; -webkit-animation:myship 2s;}
@keyframes myship {from {top: 480px;} to{top:320px;} }
@-moz-keyframes myship {from {top: 480px;} to{top:320px;}}
@-webkit-keyframes myship {from {top: 480px;} to{top:320px;} }

.reveal-intro-splash{top:320px; animation:myship2 3s; -moz-animation:myship2 3s; -webkit-animation:myship2 3s;}
@keyframes myship2 {from {opacity: 0;} to{opacity:1;} }
@-moz-keyframes myship2 {from {opacity: 0;} to{opacity:1;}}
@-webkit-keyframes myship2 {from {opacity: 0;} to{opacity:1;} }
    
section.section-intro {background-image:url(../img/pech-memoria-entretien-sepulture.jpg); background-size:cover; background-repeat:no-repeat; background-position:50% 0px;}
section.section-intro .title {position:absolute; max-width:360px; top:320px; z-index:20; left:32px;}
section.section-intro .title h1 {color:#ffffff;}
section.section-intro .splash {max-width:900px; margin:0px auto; padding:18% 0px;}
section.section-intro .splash img{width:100%;}
section.section-intro .text-intro{padding:42px 0px;}
section.section-intro .splash h2{color:#ba8f6b; font-size:0.9em; float:right; width:33%; margin-top:0px !important;}
section.section-intro .splash p{color:#999999; font-size:0.9em; line-height:1.2em; float:left; width:60%; margin-top:0px !important;}

section.section-gravure {background-color:#000000; background-image:url(../img/entretien-marbre-sepulture.jpg); background-size:cover; background-repeat:no-repeat; background-position:50% 0px; color:#ffffff;}
section.section-gravure .content {margin:0px 24% 0px 24%; padding:16% 0px 10% 0px; }
section.section-gravure .content-right {z-index:20; position:relative; max-width:320px; width:33%;}
section.section-gravure .content-img {z-index:10; text-align:center; width:65%; float:left;}
section.section-gravure .content ul {margin:22px 0px;}
section.section-gravure h2 {color:#ffffff; margin-top:0px;}
section.section-gravure p {color:#ffffff;}


section.section-entretien {background-image:url(../img/entretien-marbre-tombe.jpg); background-size:cover; background-repeat:no-repeat; background-position:50% 0px; color:#ffffff;}
section.section-entretien .content {margin:0px 24% 0px 24%; padding:16% 0px 10% 0px; }
section.section-entretien .content-left {z-index:20; position:relative; max-width:320px;  width:33%;}
section.section-entretien .content-img {z-index:10; text-align:center; width:65%; float:right;}
/*section.section-entretien .content-img img {max-width:600px; width:100%;}*/
section.section-entretien .content ul {margin:22px 0px;}
section.section-entretien h2 {color:#ffffff; margin-top:0px;}
section.section-entretien p {color:#ffffff;}


section.section-renovation {background-color:#000000; background-image:url(../img/entretien-marbre-sepulture.jpg); background-size:cover; background-repeat:no-repeat; background-position:50% 0px; color:#ffffff;}
section.section-renovation .content {margin:0px 24% 0px 24%; padding:16% 0px 10% 0px; }
section.section-renovation .content-right {z-index:20; position:relative; max-width:320px; width:33%;}
section.section-renovation .content-img {z-index:10; text-align:center; width:65%; float:left;}
section.section-renovation .content ul {margin:22px 0px;}
section.section-renovation h2 {color:#ffffff; margin-top:0px;}
section.section-renovation p {color:#ffffff;}

section.section-fleurissement {background-color:#f8f8f8; color:#ffffff; background-image:url(../img/pech-memoria-renovation-tombe-cimetiere.jpg); background-size:cover; background-repeat:no-repeat; background-position:50% 0px; }
section.section-fleurissement .content {margin:0px 24% 40px 24%; padding:16% 0px 10% 0px; color:#333e48;}
section.section-fleurissement .content-left {z-index:20; position:relative; left:0px; max-width:320px; width:33%;}
section.section-fleurissement .content-img {z-index:10; text-align:center; width:65%; float:right;}
section.section-fleurissement .content ul {margin:22px 0px;}
section.section-fleurissement h2 {color:#333e48; margin-top:0px;}
section.section-fleurissement p {color:#333e48;}

section.section-photo {background-color:#F8F8F8; color:#333e48; }
section.section-photo .content {margin:0px 14% 0px 14%; padding:18% 0px 10% 0px;}
section.section-photo .content-left {width:36%; padding-top:36px; text-align:right;}
section.section-photo .content-right {width:62%;}
section.section-photo h3 {color:#333e48;}
section.section-photo p {color:#333e48;}
section.section-photo img {width:100%; max-width:620px;}

section.section-apropos {background-image:url(../img/pech-memoria-entretien-marbre.jpg); background-size:cover; background-repeat:no-repeat; background-position:50% 0px;}
section.section-apropos .content {padding:16% 22% 10% 22%;}
section.section-apropos .content-left {float:none; width:100%;}
section.section-apropos .content-right {float:none; width:100%;}
section.section-apropos .content h2 {text-transform:none; letter-spacing:2px; font-family: 'heading-script', Arial, Helvetica, sans-serif; font-size:2em; color:#ba8f6b; }
section.section-apropos .content p {text-align:center;}
section.section-apropos .content p.exerg {font-style: oblique; }
section.section-apropos .content p.exerg:before {content:'“'; font-family: 'heading-script', Arial, Helvetica, sans-serif; font-size: 12em; margin-top: 120px; line-height: 1px; height: 40px; display: block; float: left; opacity: 0.2; margin-left:-110px;}
section.section-apropos .content p.exerg:after {content:'”'; font-family: 'heading-script', Arial, Helvetica, sans-serif; font-size: 12em; margin-top: 100px; line-height: 1px; height: 40px; display: block; float: right; opacity: 0.2; margin-right:0px;}

section.section-contact {background-color:#f8f8f8; color:#333e48;}
section.section-contact .content {margin:0px ; padding:0px; max-width:none;}
section.section-contact .content-left {width:42%; padding:8% 4%; background-color:#f1f1f1; text-align:center;}
section.section-contact .content-right {width:34%;padding:8%;}
section.section-contact .content-left img {text-align:center; width:100%; max-width:600px;}
section.section-contact .content ul {margin:42px 0px;}
section.section-contact h2 {color:#333e48; margin:6px 0px;}
section.section-contact h3 {color:#333e48; margin:0px; font-family: 'heading-script', Arial, Helvetica, sans-serif; text-transform:none; font-size:2em;}
section.section-contact h4 {color:#333e48; margin:6px 0px; font-size:1.6em;}
section.section-contact p {color:#333e48; margin:6px 0px;}

section.section-calendrier {background-image:url(../img/pech-memoria-entretien-cimetiere.jpg); background-size:cover; background-repeat:no-repeat; background-position:50% 0px; padding:106px 24%;}
section.section-calendrier .content {padding:62px 10% 102px 10%;background-color:#ba8f6b; color:#ffffff;}
section.section-calendrier .content-left {float:none; width:100%;}
section.section-calendrier .content-right {float:none; width:100%;}
section.section-calendrier .content h2 {text-transform:none; letter-spacing:2px; font-family: 'heading-script', Arial, Helvetica, sans-serif; font-size:2em; color:#333e48; line-height:0.8em; }
section.section-calendrier .content p {text-align:center; color:#ffffff}
section.section-calendrier .content table {width:100%; margin:0px 0px 42px 0px;}
section.section-calendrier .content tr {}
section.section-calendrier .content td {width:auto; border-bottom:#cfb198 1px dotted; padding:8px 0px;}


form {margin-top:62px;}
form input, form textarea, form select {border: 1px solid #f1f1f1; background-color:#f1f1f1; font-size: 0.7em; padding: 10px; color: #9b9d9c; min-width: 300px; display:block; margin:6px 0px; font-family: 'regular-font', Arial, Helvetica, sans-serif; }
form input[type=submit]{background-color:#333e48; color:#ffffff; text-transform:uppercase; min-width: 100px; font-size: 0.6em; letter-spacing: 3px; padding: 10px 22px;}
form input[type=submit]:hover {background-color:#ba8f6b;}


footer {background-color:#333e48;}
footer .content{padding:16px 0px; font-size:0.8em; text-align:center;}
footer .content ul {margin:0px auto; padding:0px; list-style-type:none;}
footer .content ul li {margin:0px; padding:0px; list-style-type:none; display:inline-block;}
footer .content ul li a{text-decoration:none; text-transform:uppercase; letter-spacing:3px; font-size:0.6em; color:#999999; padding:2px 22px;}
footer .content ul li a:hover,footer ul li a.active {text-decoration:none; color:#ffffff;}


a.retour {display:block; margin-top:82px; color:#333e48;}
a.retour:before {content:url(../img/retour-pech-memoria.png); float:left; margin: -10px 42px 0px 0px;}

/* --------- COOKIES --------- */

.cookieConsentContainer { z-index: 999; width: 300px; min-height: 20px; box-sizing: border-box; padding: 30px 30px 30px 30px; background: #333e48; overflow: hidden; position: fixed; bottom: 30px; right: 30px; display: none; background-image:url('../images/cookies.png'); background-repeat: no-repeat; background-size: 30%; background-position: 90%;}
.cookieConsentContainer .cookieTitle {color:#ffffff}
.cookieConsentContainer .cookieDesc p { margin: 0; padding: 0; color: #FFFFFF; font-size: 0.7em; line-height: 20px; display: block; margin-top: 10px;}
.cookieConsentContainer .cookieButton a {cursor: pointer; display: inline-block; font-family: OpenSans, arial, "sans-serif"; color: #FFFFFF; font-size: 11px; font-weight: bold; margin-top: 14px; background: #333e48; box-sizing: border-box; border:1px solid #666666; padding: 8px 12px; text-align: center; transition: background 0.3s;}
.cookieConsentContainer .cookieButton a:hover {cursor: pointer; display: inline-block; font-family: OpenSans, arial, "sans-serif"; color: #FFFFFF; font-size: 11px; font-weight: bold; margin-top: 14px; background: #ba8f6b; box-sizing: border-box; border:1px solid #ba8f6b; padding: 8px 12px; text-align: center; transition: background 0.3s;}
.cookieConsentContainer .cookieClose  {float:right}
.cookieConsentContainer .cookieClose a {cursor: pointer; color:#ffffff; }
.cookieConsentContainer .cookieClose a:hover {cursor: pointer; color:#ba8f6b; }


@media only screen and (max-width:900px) {
	
	body {font-size:18px;}
	header .content {padding-left:0px !important; padding-right:0px !important; margin-left:0px !important; margin-right:0px !important;}
	header .brand {float: none; margin: 22px 22px 22px 22px; width: 220px;}
	header nav {display:none !important;}
	#menuToggle {display: block !important; right: 46px;}
	section {min-height: auto;}
	.content {padding-left:6% !important; padding-right:6% !important; margin-left:4% !important; margin-right:4% !important;}
	.content-left {float:none !important; width:100% !important;}
	.content-right {float:none !important; width:100% !important;}
	section .content .content-img {width:100% !important;}
	section.section-intro .title {left:0%; top: 240px; position:absolute; max-width: 220px;}
	.reveal-intro-titre{top:250px; animation:myship 2s; -moz-animation:myship 2s; -webkit-animation:myship 2s;}
	@keyframes myship {from {top: 380px;} to{top:240px;} }
	@-moz-keyframes myship {from {top: 380px;} to{top:240px;}}
	@-webkit-keyframes myship {from {top: 380px;} to{top:240px;} }
	section.section-intro .title h1{font-size:24px;}
	section.section-intro .splash {padding-top:142px;}
	section.section-intro .splash p {float: none; width: 100%; margin-bottom:42px;}
	section.section-intro .splash h2{font-size:0.7em; float: none; width: 100%; margin-bottom:42px;}
	section.section-intro .text-intro {padding: 82px 0px;}
	section.section-fleurissement .content {margin-bottom:0px;}
	section.section-photo .content {padding-bottom: 122px;}
	section.section-photo .content-left {width: 100%; padding-top: 0px; text-align: left;}
	section.section-contact .content {padding-left:0% !important; padding-right:0% !important; margin-left:0% !important; margin-right:0% !important;}
	section.section-contact .content-left {width:92% !important; padding:13% 4%; }
	section.section-contact .content-right {width:84% !important;padding:8%;}
	section.section-calendrier {padding:106px 6%;}
	section.section-calendrier .content {padding:42px 3% 72px 3%;}
	section.section-calendrier .content table {width:100%; }
	.contact-instant {right: -80px; top: 296px;}
	.contact-instant a {padding: 10px 22px; font-size:16px; letter-spacing:2px;}
	.next {right:-32px; }
	.previous {left:-32px;}         
	.previous, .next { cursor: pointer; position: absolute; bottom: 10px; padding: 10px 10px; margin-top: -25px; width:60px;}
	.previous:hover, .next:hover {padding: 10px 0px;}

	
	}