input[type="text"],textarea,select{ padding:8px 5px; margin:8px 0; display:inline-block; border:1px solid #ccc; border-radius:4px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

/* -------------- Contact --------------- */
.pagewcontact .texte, .pagewplan-dacces .texte, .pagewplan-site .texte{ text-align:center;}
.contactsite{ width:65%; margin:auto;}
.contact .ttl, .ttl1{ text-align:center; position:relative;}
.contact .ttl::before, .ttl1::before{ content:""; display: block; width:100px; height:1px; left:0; right:0; bottom:0; background:#b52b3f; position:absolute; margin:auto; }
.contactsite p.plabel{ margin:0; padding:0; font-weight:bold;}
.contactsite p.pinput{ margin:0; padding:0 0 10px 0;}
.btSubmit1, .btSubmit2{ background: #070906; -webkit-border-radius: 5; -moz-border-radius: 5; border-radius: 5px; color: #ffffff; font-size:22px; padding: 10px 20px; text-decoration: none; cursor:pointer; border:0;}
.plabel{ text-align:left;}
/*------------- plan d'accès -------------------*/
.googleMAP{ padding:25px 0;}
.googleMAP iframe{ width:70%; height:400px;}
/* ---------------- plan du site --------------- */
.plansite{ padding:20px 0; text-align:left; width:50%; margin:auto;}
.plansite ul li{ line-height:30px; color: #af0026; }
.plansite ul li a{ color: #af0026; font-weight:bold;}
/* realisations */
#pagerealisation ul,#pagerealisation ul li{ margin:0; padding:0; list-style:none;}
#pagerealisation .menuDiapo{ float:left; width:28%; margin-right:2%;}
#pagerealisation .menuDiapo ul li { border-bottom:1px solid #FFF;}
#pagerealisation .menuDiapo ul{ padding-left:5px;}
#pagerealisation .menuDiapo a.rub-disable{ cursor:not-allowed; opacity:0.4;}
#pagerealisation .menuDiapo ul li:first-child{ border-top:1px solid #FFF;}
#pagerealisation .menuDiapo ul li a{ display:block; padding:10px 0 10px 5px; text-transform:uppercase;}
#pagerealisation .menuDiapo ul li.play a,#pagerealisation .menuDiapo ul li a:hover{ background:#FFF; color:#000;}
#diapoREA{ float:right; width:70%;}
.titreDiapo{ font-size:18px; height:42px; line-height:42px; padding-left: 5px; color:#d88e11; margin:0;}
.rubDiapo{ display:inline-block; margin:4px; border: 1px solid #d88e11; text-align:center; padding: 5px;  -webkit-border-radius: 5; -moz-border-radius: 5; border-radius: 5px; width: 150px; height: 158px; overflow: hidden;}
.rubDiapo .img{ height:100px; border: 1px solid grey; width: 100px; background-color:black; margin: auto;}
.rubDiapo img{ height:auto;}
.rubDiapo .lien{ text-align:center;}
.rubDiapo .lien a{ color: #000; text-transform: uppercase; font-weight: bold; font-size:12px; text-decoration: none; display:block;}
#box1,#box2{ float: left;}
.extraitArt{ border-radius: 5px; padding: 45px 5px 5px 5px; max-width:500px;}
.extraitArt .intitule a{ font-size: 20px; text-decoration: none;}
.extraitArt .date{ text-align: right; font-style: italic; font-size: 11px;}
h3.intitule{ margin:0; padding:5px 0;}



/*** INTEGRATION ***/
@font-face {
  font-family: 'Lato-Light';
  src: url('Lato-Light.eot?#iefix') format('embedded-opentype'),  url('Lato-Light.woff') format('woff'), url('Lato-Light.ttf')  format('truetype'), url('Lato-Light.svg#Lato-Light') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Cinzel-Bold';
  src: url('Cinzel-Bold.eot?#iefix') format('embedded-opentype'),  url('Cinzel-Bold.otf')  format('opentype'),
	     url('Cinzel-Bold.woff') format('woff'), url('Cinzel-Bold.ttf')  format('truetype'), url('Cinzel-Bold.svg#Cinzel-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Cinzel-Regular';
  src: url('Cinzel-Regular.eot?#iefix') format('embedded-opentype'),  url('Cinzel-Regular.otf')  format('opentype'),
	     url('Cinzel-Regular.woff') format('woff'), url('Cinzel-Regular.ttf')  format('truetype'), url('Cinzel-Regular.svg#Cinzel-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}


*, *::before, *::after{box-sizing: border-box;}
body{ margin: 0; padding: 0;background: #fff;}
div, td{font-family:'Lato-Light'; font-size: 16px; color: #44555b;}
a{text-decoration: none; color: #b52b3f}
.clear{ clear: both;}
h1{color: #b52b3f; font-size:40px;font-family:'Cinzel-Bold';  font-weight: normal; text-transform: uppercase; padding: 20px 0; margin: 0}
h2 {    margin: 0;    text-transform: uppercase;    font-size: 20px;    padding: 5px 0;}
h3{  text-transform: uppercase;    font-size: 14px; color:#af0026; padding:5px 0 5px 20px;  }
.mtc{ padding:20px 0;}
p{margin: 0; padding: 10px 0;}
.wrapper{max-width: 1320px; margin: 0 auto; width: 100%; padding: 0 }
#pageweb{ overflow: hidden}
header{background: #070906; position: relative; }
.menu-top{}
.menu-top ul{margin: 0; padding: 0; text-align: center; position: relative; border-bottom: #af0026 5px solid;}
.menu-top ul::before{content: ''; width: 100%; left: -100%; bottom: -5px;border-bottom: #af0026 5px solid; position: absolute}
.menu-top ul::after{content: ''; width: 100%; right: -100%; bottom: -5px;border-bottom: #af0026 5px solid; position: absolute}
.menu-top li{display: inline-block; vertical-align: middle; overflow: hidden}
.menu-top a{color: #fff; font-size: 17px ; padding: 35px 15px; line-height: 16px; display: block; position: relative; z-index: 2}
.menu-top a::before{content: ''; position: absolute; background: #af0026; width: 100%; height: 100%; bottom: -110px; opacity: 0; left: 0; z-index: -1}
.menu-top a:hover::before{bottom: 0; opacity: 1;  transition: all ease 0.5s}

#cont-fla{position: relative; min-height:600px;}
#flash{position: absolute; z-index: 0; width:100%; overflow: hidden;height: 600px;}
#anim{position: relative; width: 1920px;   left:50%; margin-left:-960px}
.mn{position: relative; z-index: 1}
.mn a{display: block; width: 294px; text-align: center; text-transform: uppercase; color: #fff; background:url(../images/pict-acc.png) left center no-repeat #af0026; padding: 10px 0; margin: 0 auto; background-position: 30px }
.cont-logo{position: relative; z-index: 1;max-width: 820px; width:100%; margin: 0 auto; padding: 66px 0}
#logo{background:rgba(175, 0, 38, 0.8); padding: 40px 0; max-width: 400px; text-align: center; width: 100%; float: left; z-index: 10; position: relative}
.coord{float: left; max-width: 400px; width: 100%;  background:rgba(7, 9, 6, 0.7); position: relative; top: 100px; left: -40px; text-align: right; padding-right: 30px}
.coord p, .coord a{color: #fff;}
.adr{font-size: 18px; padding: 20px 0 10px 0}
.tel{font-size: 36px; padding-right: 30px; background: url(../images/bg-tel.png) right center no-repeat;}
.tel span{ font-size: 13px; color: white;}
.sociaux{padding-bottom: 20px;     display: flex;    justify-content: flex-end;}
/*central*/
#central{background: #fff; padding-top: 60px}
#central.contact{ padding:0;}
.deco{float: left; max-width: 50%; width: 100%; padding-right: 40px}
#ct2{background: url(../images/bc-cont.jpg) no-repeat; position: relative;}
#ct2::after{content: ''; background: url(../images/bg-ct1.png) right top no-repeat; position: absolute; width: 189px; height: 341px; right: 0; top: -130px}
.texte {    position: relative;    z-index: 100;}
.presta{position: relative; padding: 60px 0}
.presta::after{content: ''; position: absolute; background: url(../images/deco2.png) right center no-repeat; width: 457px; height: 664px; right: -110px; top:-90px; z-index: 1}
.presta ul{margin: 0; padding: 0;}
.presta li{display: inline-block; max-width: 25%; width: 100%; padding-right: 15px; vertical-align: top;}
.titre{font-family:'Cinzel-Regular'; font-size: 20px; color: #af0026; text-transform: uppercase; }
.plus a{ display: inline-block; background:#af0026; padding: 10px 20px; color: #fff; }
.txt{min-height: 100px}
.gal{padding: 60px 0}
.imag img{border: #fff 5px solid}
.imag {
	position: relative;cursor: pointer; overflow: hidden}
.imag::before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: block;
	content: '';
	width: 0;
	height: 0;
	background: rgba(255,255,255,.2);
	border-radius: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;cursor: pointer; 
}
.imag:hover::before {
	-webkit-animation: circle .75s;
	animation: circle .75s;
}
@-webkit-keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}
@keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}
.gal ul{margin: 0 -20px; padding: 0; letter-spacing: -0.46em}
.gal li{letter-spacing: normal; display: inline-block; cursor: pointer; max-width: 25%; width: 100%; padding: 0 20px}
#presta2::after{content: ''; background: url(../images/bg-ct3.png) right top no-repeat; position: absolute; width: 260px; height: 341px; right: -80px; z-index: 10; bottom:-160px}
#presta2::before{content: ''; background: url(../images/bg-ct2.png) right top no-repeat; position: absolute; width: 278px; height: 313px; left: -120px; z-index: 10; top:-180px}
#presta2{position: relative; background: url(../images/bg-ct2.jpg) center no-repeat;}
.presta2{padding: 70px 0; position:relative; z-index:20;}
.presta2  ul{margin: 0 -15px; padding: 0; letter-spacing: -0.46em}
.presta2 li{display: inline-block; letter-spacing: normal; max-width: 32%; width: 100%; padding: 0 15px;}
figure{display: block; position: relative; margin: 0; padding: 0; overflow: hidden}
figcaption{position: absolute; width:100%; top: 0px; left: 0 ; right: 0; bottom: 0;  padding:160px 45px 30px 45px; z-index: 10;transition: padding-top 0.5s; cursor:pointer;}
figcaption::after{content: '';  position: absolute; border: #fff 2px solid; top:20px; left: 20px; right: 20px; bottom: 20px; z-index: -1}
figcaption::before{content: ''; position: absolute;background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ width: 100%; height: 100%; top: 0; left: 0; opacity: 0.65; z-index: -1}
figcaption::before{transform: translateY(50%);}
figcaption:hover::before{transform: translateY(0); transition: all ease 0.5s}
.titre2{color: #fff; font-size: 24px; text-transform: uppercase; font-family: 'Cinzel-Regular';}
.txt2{ color: #fff;}
.plus2{display: inline-block; color: #fff; background: #af0026; padding: 10px 25px; transform: scale(0); transition: all ease 0.5s}
figure:hover .plus2{transform: scale(1); }
figure:hover figcaption{padding-top: 130px; }
/*footer*/
#footer{background: #af0026; padding: 30px 0; position: relative}
.menu-foot ul{margin: 0; padding: 0; text-align: center; position:relative; z-index:100;}
.menu-foot li{display: inline-block; position: relative}
.menu-foot a{color: #fff; display: block; padding:10px 10px; }
.menu-foot a:hover{color: #000}
.mtc{padding: 40px 0 ;text-align: center}

/*** template page **/
#central.tpage{ padding:0;}
.cont-1{ display: flex; align-items:center; padding:30px 0; }
.ph{ width:40%; margin-right:5%; }
.texte1{ width:55%;}
.cont-txt {     background: url(../images/bc-cont.jpg) no-repeat; background-size:cover; padding:30px 0;    position: relative;}
.gal1{ padding:30px 0;}
.gal1 ul.anim{ margin:0;}
/*responise*/
#cssmenu{ display: none;}
img {    max-width: 100%;    height: auto;}
@media only screen and (max-width:1679px){
	img{ max-width:100%; height: auto}
}
@media only screen and (max-width:1559px){
	
}
@media only screen and (max-width:1439px){
	
	#presta2::before{    top: -80px;background-size: 200px; left: -170px}
	#presta2::after{background-size: 200px;}
}
@media only screen and (max-width:1365px){
	.menu-top a{ padding:35px 12px;}
	#presta2::after{background-size: 170px;}
	#ct2::after{background-size: 140px; top: -100px}
	.wrapper{padding: 0 10px}
	.presta2 li{max-width: 33.333333%;}
}

@media only screen and (max-width:1279px){
	.menu-top a {    padding: 35px 7px;}
	#ct2::after{display: none}
	.presta::after{background-size: 320px;}
	figcaption{padding-top: 130px}
	figure:hover figcaption{padding-top: 80px; }
}
@media only screen and (max-width:1175px){

	
}
@media only screen and (max-width:1151px){
	.menu-top a{padding: 35px 8px}
	.menu-top a span{ font-size:14px;}
	.texte{padding-bottom: 20px}
	.txt{min-height: 120px}
	.titre2{font-size: 20px}
	figcaption{padding-top: 90px}
	figure:hover figcaption{padding-top: 60px; }
}


@media only screen and (max-width:1059px){
	.menu-top a{font-size: 14px}
	figcaption{padding-top: 80px}
	figure:hover figcaption{padding-top: 40px; }
	}
@media only screen and (max-width:1023px){
	.menu-top a {    padding: 35px 6px;}
	.titre2{ font-size:18px; padding:0;}
	.txt2{ font-size:15px;}
	.plus2{ padding:0;}
	figure:hover figcaption{padding-top: 50px; }

}
@media only screen and (max-width:979px){
	.menu-top a { font-size:12px;}
	.txt {    min-height: 140px;}
	.titre2{ font-size:15px; }
	.txt2{ font-size:13px;}
}
@media only screen and (max-width:899px){
	.menu-top, .menu-foot {    display: none;}
	#cssmenu{ display:block;}
	#cont-fla {    border-top: #af0026 5px solid;}
	#logo, .coord{ width:390px;}
	.coord{ float:right; left:-10px;}
	.titre{ font-size:16px;}
	.txt {    min-height: 160px;}
	#presta2{ background-size: cover;}
	.presta2 li {    max-width: 50%;}
	.presta2 li img{ width:100%; height:auto;}
	.presta2 li:last-child{ max-width:100%;}
	.titre2 {    font-size: 25px;}
	.txt2 {    font-size: 16px;}
	figcaption {    padding-top: 120px;}
	figure:hover figcaption{padding-top: 80px; }
	.presta2 li:last-child figcaption {    padding: 310px 115px 30px 115px;}
	.presta2 li:last-child figure:hover figcaption{padding-top: 240px; }
	.mtc{ padding:0;}
	.cont-1{ flex-direction:column;}
	.ph{ width:60%; margin:0;}
	.texte1{ width:100%; padding:10px 0 0 0;}
	.gal{ padding:20px 0;}
}
@media only screen and (max-width:799px){
	.coord, #logo {    width: 374px;}
}
@media only screen and (max-width:767px){
	.coord, #logo {   width: 350px;}
	#cont-fla{ min-height:auto;}
	#flash{height: 438px;}
#anim{width: 1400px;    margin-left:-700px}
.presta::after{ display: none;}
.presta li{ max-width:33%;}
.gal li {    max-width: 50%;    width: 100%;    padding: 0 15px 15px 15px;    text-align: center;}
.contactsite{ width:70%;}
#central.contact{ padding-top:60px;}
#central.tpage{ padding-top:40px;}

}
@media only screen and (max-width:719px){
	.coord, #logo {   width: 310px;}	
	.coord{ padding-right:15px;}
	#central{ padding-top:80px;}
	h1{ font-size:30px;}
	.titre2 {    font-size: 20px;}
	.txt2 {    font-size: 14px;}
	.presta2 li:last-child .titre2 {    font-size: 25px;}
	.presta2 li:last-child .txt2 {    font-size: 16px;}
}
@media only screen and (max-width:639px){
	#logo, .coord {    width: 320px;    padding: 15px 0;    float: none;    margin: 0 auto;}
	.coord{ top:0; left:0; text-align:center;}
	.adr{ padding:0;}
	.tel{ padding:0; background:none;}
	.tel p{ margin:0; padding:0;}
	.mn a{ width:320px;}
	.cont-logo{ padding:10px 0;}
	.presta ul{ text-align: center; }
	.presta li{ max-width:32%; text-align:left;}
	figcaption {    padding-top: 100px;}
	figure:hover figcaption{padding-top: 60px; }
	.contactsite{ width:90%;}
	#central.contact{ padding-top:30px;}
	.plansite{ width:80%;}
	#central.tpage{ padding-top:20px;}
	.sociaux {    justify-content: center;    padding-top: 5px;}
}
@media only screen and (max-width:599px){
	.deco{ display:none;}
	#central {    padding-top: 30px;}
	.titre {    font-size: 14px;}
	.txt {    min-height: 180px;}
	.titre2 {    font-size: 16px;}
	figcaption {    padding: 60px 35px 30px 35px;}
	txt2 {    font-size: 12px;}
	figure:hover figcaption{padding-top: 25px; }
	figcaption p{ padding:5px 0;}
	.presta2 li:last-child figcaption {    padding: 280px 115px 30px 115px;}
	.presta2 li:last-child figure:hover figcaption{padding-top: 200px; }
}
@media only screen and (max-width:532px){
	#ct2{ background-size:cover;}
	.presta li{ max-width:80%; margin:auto; display: block; text-align:center; padding-bottom:25px; margin-top:25px; border-bottom:1px solid #fff;}
	.txt {    min-height: auto;}
	.presta2 li{ max-width:100%; margin-bottom:25px;}
	figcaption {    padding: 190px 35px 30px 35px !important;}
	figure:hover figcaption{padding-top: 120px !important; }
	.titre2 {    font-size: 25px !important;}
	.txt2 {    font-size: 16px !important;}
	.titre {    font-size: 20px;}
	.googleMAP iframe{ width:90%;}
	.ph{ width:80%;}
}
@media only screen and (max-width:479px){
	figcaption {    padding: 150px 35px 30px 35px !important;}
	figure:hover figcaption{padding-top: 80px !important; }
	.contactsite{ width:100%;}
	.plansite{ width:100%;}
}
@media only screen and (max-width:359px){
	.titre2 {    font-size: 18px !important;}
	.txt2 {    font-size: 14px !important;}
	figcaption {    padding: 100px 30px 30px 30px !important;}
	figure:hover figcaption{padding-top: 50px !important; }
	#logo, .coord, .mn a {    width: 100%;}
	.contactsite form p:first-child{ font-size:13px;}
		
}