* CSS Document */

body { background-position:center center; background-repeat:no-repeat; background-attachment:fixed; background-size:cover; background-color:#012942; }
@media screen and (max-width: 480px) { body { font-size:90%; } }

img { border:0px; }

h1 { font-size:1.2rem; margin-top:0.2em; margin-bottom:5px; font-weight:bold; font-family:Arial, Verdana, Tahoma, sans-serif; color:#e6d39b; text-shadow: 0px 2px 2px #000; text-align:justify; }
h1.homenew { font-size: 1.3rem; text-align: center; }

h2 { font-size:1.2rem; font-weight:bold; font-family:Arial, Verdana, Tahoma, sans-serif; color:#e6d39b; text-shadow: 0px 2px 2px #000; text-align:justify; }
h2.salaison { font-size:1.3rem; font-weight:bold; font-family:Arial, Verdana, Tahoma, sans-serif; color:#e6d39b; text-shadow: 0px 2px 2px #000; text-align:center; background-color: rgba(255,255,255,0.5); padding: 15px;	width: 50%;	margin: auto; border-radius: 10px; }


div.header { margin-left:auto; margin-right:auto; width:100%; text-align:center }
span.logo { margin-bottom:0px; }
img.logo { margin-top:0px; }
img.separation { width:100%; height:1px; margin-top:0px; margin-bottom:0px; }

div.menu { width:100%; margin-left:auto; margin-right:auto; margin-top:8px; margin-bottom:0px; text-align:center; font-family:Arial, Verdana, Tahoma, sans-serif; font-weight:bold; font-size:1rem; color:#e6d39b; text-shadow: 0px 2px 2px #000; }
span.menu1 { margin-right:2%; }
span.menu2 { margin-left:2%; margin-right:2%; }
span.menu3 { margin-left:2%; margin-right:2%; }
span.menu4 { margin-left:2%; }
a { text-decoration:none; color:#e6d39b; }
a:hover { color:#FFFFFF }

@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans'), local('OpenSans'), url(http://www.maison-carrere.fr/1/font/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); }
div.main { width:100%; }
div.content { width:100%; margin-left:auto; margin-right:auto; padding-top:50px; padding-bottom:10px; font-family:'Open Sans', Verdana, Tahoma, sans-serif; text-align:center; }
div.container { width: 50%; margin: 50px auto 0; padding: 20px; background-color: rgba(4,42,65,0.95); border-radius: 10px; border: 3px solid #d3c5ab; }

div.left { float:left; margin-left:24%; width:29%; margin-right:1%; background-image:url("images/pixel-opak.png"); padding-left:1em; padding-top:0.8em; padding-right:1em; border-radius:0.6em; }
div.right { float:left; margin-right:15%; width:21%; padding-left:6px; padding-top:4px; padding-bottom:5px; }
div.droite { float:left; margin-top:-10%; margin-left:2%; }
div.center { margin-left:15%; margin-right:15%; width:auto; background-image:url("images/pixel-opak.png"); padding-left:1em; padding-top:0.8em; padding-bottom:4px; padding-right:1em; border-radius:0.6em; }
div.contact { margin-left:auto; margin-right:auto; width:30%; background-image:url("images/pixel-opak.png"); padding-left:1em; padding-top:0.8em; padding-bottom:4px; padding-right:1em; border-radius:0.6em; }
span.center { background-image:url("images/pixel-opak.png"); padding-left:1em; padding-top:4px; padding-bottom:5px; padding-right:1em; }
p.desc { font-size:0.95rem; color:#e6d39b; text-shadow: 0px 2px 2px #000; text-align:justify; line-height:1.5 }
p.descBoutique { font-size:0.95rem; color:#e6d39b; text-shadow: 0px 2px 2px #000; text-align:left; line-height:1.5 }
p.descIndex { font-size:0.95rem; color:#e6d39b; text-shadow: 0px 2px 2px #000; text-align:justify; line-height:1.5 }
p.bandeau { font-family:'Open Sans', Verdana, Tahoma, sans-serif; font-size:0.95rem; color:#e6d39b; text-shadow: 0px 2px 2px #000; text-align:center; line-height:1.5 }
nav.shop { font-family:'Open Sans', Verdana, Tahoma, sans-serif; font-size:1.3rem; text-align:center; padding: 15px; margin: auto; }
iframe { border:0px; }
li { color:#e6d39b; font-size:0.95rem; text-shadow: 0px 2px 2px #000; line-height:1.5 }

table.index { width:95%; text-align:justify; margin-left:auto; margin-right:auto; border:none;  }
td.1 { width:33%; text-align:justify; font-family:'Open Sans', Verdana, Tahoma, sans-serif; font-size:0.95rem; text-shadow: 0px 2px 2px #000; }

div.villes { width:78%; text-align:justify; margin-left:auto; margin-right:auto; }

div.boutique { width:78%; text-align:justify; margin-left:auto; margin-right:auto; }
table.boutiques { width:78%; text-align:left; margin-left:auto; margin-right:auto; border:none;  }
td.boutique { width:33%; text-align:left; font-family:'Open Sans', Verdana, Tahoma, sans-serif; font-size:0.95rem; text-shadow: 0px 2px 2px #000; vertical-align:text-top; }

div.salaison { width:80%; text-align:center; margin-left:auto; margin-right:auto; }
div.canard { float:left; width:47%; text-align:justify; margin-left:auto; margin-right:6px; display:block; }
div.porc { float:right; width:47%; text-align:justify; margin-left:6px; margin-right:auto; display:block;  }
div.clear { clear:both; height:0px; overflow:hidden; }
span.grammes { float:right; }

div.footer { width:100%; padding-top:0px; text-align:center; background-image:url("images/pixel-footer.png"); border-radius:0.6em; }
a.footer { color: #FFFFFF; }
img.facebook { margin-right:10%; margin-bottom:1.5%; }
img.contactDetails { margin-top:0.5%; }
img.instagram { margin-left:10%; margin-bottom:1.5%; }


label.contact { font-family:'Open Sans', Verdana, Tahoma, sans-serif; font-size:0.95rem; color:#e6d39b; text-shadow: 0px 2px 4px #000; }
label.reco { display: block; width: 220px; }
label.antispam { display: block; width:100%; font-family:'Open Sans', Verdana, Tahoma, sans-serif; font-size:0.95em; color:#e6d39b; ttext-shadow: 0px 2px 2px #000; }

p.label { padding-left:35px; }
a.submit { margin-top:15px; text-transform:uppercase; font-family:'Open Sans', Verdana, Tahoma, sans-serif; font-size:1em; color:#e6d39b; font-weight:bold; text-shadow: 0px 2px 4px #000; }
a.submit:hover { color:#FFFFFF; }
input.inputfield { background-color:#e3e1e2; border:0px solid #000; margin-bottom:5px; color:#000; font-family:Verdana, Tahoma, sans-serif; font-size:0.8em; width:70%; }
textarea.textfield  { background-color:#e3e1e2; border:0px solid #000; margin-bottom:5px; color:#000; font-family:Verdana, Tahoma, sans-serif; font-size:0.8em; width:100%; }

.cl-effect-20 a {
	line-height: 2em;
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	perspective: 800px;
	color: #042a41;
}
.cl-effect-20 a span {
	position: relative;
	display: inline-block;
	padding: 3px 15px;
	background: #d3c5ab;
	box-shadow: inset 0 3px #2f4351;
	-webkit-transition: background 0.6s;
	-moz-transition: background 0.6s;
	transition: background 0.6s;
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 0% 50%;
	-moz-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
}
.cl-effect-20 a span::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	color: #042a41;
	content: attr(data-hover);
	-webkit-transform: rotateX(270deg);
	-moz-transform: rotateX(270deg);
	transform: rotateX(270deg);
	-webkit-transition: -webkit-transform 0.6s;
	-moz-transition: -moz-transform 0.6s;
	transition: transform 0.6s;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	transform-origin: 0 0;
	pointer-events: none;
}
.cl-effect-20 a:hover span,
.cl-effect-20 a:focus span {
	background: #2f4351;
}
.cl-effect-20 a:hover span::before,
.cl-effect-20 a:focus span::before {
	-webkit-transform: rotateX(10deg);	
	-moz-transform: rotateX(10deg);
	transform: rotateX(10deg);
}