*{
	margin:0;
	padding:0;
	line-height:1;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

@font-face { font-family: 'ChampagneLimousine'; src: url('fonts/champagne__limousines-webfont.eot'); src: url('fonts/champagne__limousines-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/champagne__limousines-webfont.woff2') format('woff2'), url('fonts/champagne__limousines-webfont.woff') format('woff'), url('fonts/champagne__limousines-webfont.ttf') format('truetype'), url('fonts/champagne__limousines-webfont.svg#champagne__limousinesregular') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'ChampagneLimousine'; src: url('fonts/champagne__limousines_bold-webfont.eot'); src: url('fonts/champagne__limousines_bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/champagne__limousines_bold-webfont.woff2') format('woff2'), url('fonts/champagne__limousines_bold-webfont.woff') format('woff'), url('fonts/champagne__limousines_bold-webfont.ttf') format('truetype'), url('fonts/champagne__limousines_bold-webfont.svg#champagne__limousinesregular') format('svg'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'Raleway'; src: url('fonts/raleway-light-webfont.eot'); src: url('fonts/raleway-light-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/raleway-light-webfont.woff2') format('woff2'), url('fonts/raleway-light-webfont.woff') format('woff'), url('fonts/raleway-light-webfont.ttf') format('truetype'), url('fonts/raleway-light-webfont.svg#Raleway') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Raleway'; src: url('fonts/raleway-semibold-webfont.eot'); src: url('fonts/raleway-semibold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/raleway-semibold-webfont.woff2') format('woff2'), url('fonts/raleway-semibold-webfont.woff') format('woff'), url('fonts/raleway-semibold-webfont.ttf') format('truetype'), url('fonts/raleway-semibold-webfont.svg#ralewaysemibold') format('svg'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'opificioregular'; src: url('fonts/opificio-webfont.eot'); src: url('fonts/opificio-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/opificio-webfont.woff2') format('woff2'), url('fonts/opificio-webfont.woff') format('woff'), url('fonts/opificio-webfont.ttf') format('truetype'), url('fonts/opificio-webfont.svg#opificioregular') format('svg'); font-weight: normal; font-style: normal; }

*[contentEditable="true"]{
	outline:none;
	outline:1px solid transparent;
	transition:all 0.2s;
}

*[contentEditable="true"]:hover{
	outline-color:#659ff6;
}

*[contentEditable="true"]:focus{
	outline-color:#E7E7E7;
}

.packshot{
	cursor:pointer;
}

body{
	background:#E7E5DE;
	font-family:'ChampagneLimousine', sans-serif;
	font-size:14px;
}

#preview{
	background:#E7E5DE;
	width:880px;
	margin:40px auto;
	margin-top:90px;
}

#date{
	font-family: 'Raleway';
	text-align:center;
	margin:12px auto;
	color:#94836e;
	font-size:12px;
	text-transform:uppercase;
}

#main{
	background:white;
	background-position:0 100%;
	background-size:170px auto;
	border:2px solid #C1A978;
}

#main > p{
	text-align: center;
	padding: 10px;
	margin: 2em auto 3em;
	width: 70%;
	font-size: 16px;
}

#promo{
	display: block;
	margin: -20px auto 30px;
	margin-top: -20px;
}

#logo{
	height: 60px;
	display: block;
	margin: 0 auto 50px;
}

#footer{
	text-align:center;
	font-size:14px;
	line-height:14px;
	width:70%;
	margin:20px auto;
	color:#71706E;
}

 #legal-mention{
	text-align:center;
	font-size:11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-family: 'Raleway';
}

#logo{
	display:block;
	margin:60px auto;
	height:80px;
}

h1{
	text-align:center;
	width: 70%;
	margin:0 auto 20px auto;
	color:#d78b1e;
	background: white;
	font-weight:normal;
	font-size:30px;
	padding: 5px;
}

h4{
	text-align:center;
	width:70%;
	margin:0 auto 20px auto;
	font-weight:normal;
	font-size:18px;
	padding: 5px;
	color:#5f574f;
}

#rows{
	width:70%;
	margin:40px auto 0;
}

.row{
	background: url(img/separateurs.png) no-repeat;
	background-position: bottom center;
	padding:30px 0;
}

.row:last-child{
	background:none;
}

.item{
	position:relative;
}

.item .handle{
	position:absolute;
	top:50%;
	margin-top:-60px;
	right:-40px;
	opacity:0;
	transition:opacity 0.3s;
}

.item .handle span{
	text-decoration:none;
	font-size:24px;
	display:block;
	color:white;
	width:32px;
	height:32px;
	line-height:28px;
	text-align:center;
	background:#659ff6;
	border:1px solid #659ff6;
	margin:4px 0;
	cursor:pointer;
	font-family:Helvetica, Arial, sans-serif;
}

.item .handle span:hover{
	background:white;
	color:#659ff6;
	border-color:#659ff6;
}

.editable .item:hover .handle{
	opacity:1;
}

.item h2{
	font-weight:normal;
	font-size:26px;
	color:#383838;
	width:90%;
	padding: 5px;
}

.item h3{
	font-weight:normal;
	font-size:18px;
	margin-top:-4px;
	color:#C66C05;
	width:90%;
	padding: 5px;
}

.item h4{
	font-weight:normal;
	font-size:18px;
	margin:0;
	color:#383838;
	width:90%;
	padding: 5px;
	text-align: left;
}

.item p{
	font-family: 'Raleway';
	font-size:14px;
	line-height:18px;
	max-width:75%;
	margin-top:15px;
	margin-bottom:15px;
	color:#5f574f;
	padding: 5px;
}

.item .price::after{
	content:' €';
}

.item .price.real{
	color:#C66C05;
	font-size:34px;
	padding: 5px;
}

.item .price.barre{
	font-size:22px;
	text-decoration:line-through;
	color:#5f574f;
	padding: 5px;
	margin-top: -5px;
}

.item .thumb{
	display:table-cell;
	vertical-align:middle;
	width:18%;
	padding-right:3%;
	text-align:left;
}

.item .thumb img{
	width:100%;
	padding: 5px;
}

.item .thumb img{
	border:1px solid transparent;
	transition: border 0.3s ease-in-out;
}

.item .thumb:hover img{
	border-color:#659ff6;
}

.item .desc{
	display:table-cell;
	vertical-align:middle;
	width:60%;
}

.item .infos{
	display:table-cell;
	vertical-align:middle;
	width:20%;	
}

.item .centilisation{
	margin-top:12px;
	font-size:14px;
	color:#5f574f;
	padding: 5px;
	margin-top: -5px;
}

.item .note{
	font-size:13px;
}

.item .medals{
	
}

.item .medals span{
	width: 65px;
	height: 65px;
	overflow: hidden;
	display: inline-block;
	border:1px solid transparent;
	vertical-align: top;
	transition:border 0.2s;
}

.item .medals span img{
	width: 100%;
	vertical-align: middle;
}

.editable .item .medals:hover span{
	border-color:#D9D9D9;
}

.editable .item .medals span:hover{
	border-color:#659ff6;
}

.editable .item .medals span.active{
	border:1px solid #FFF;
	outline:1px solid #659ff6;
}

#hero{
	padding:50px 0;
}

#hero .item{
	display:table-cell;
	vertical-align:top;
	width:48%;
	height:400px;
	padding-left:20%;
	padding-right:20px;
	position:relative;
}


#hero .item img{
	position:absolute;
	height:530px;
	top:-20px;
	right:10px;
}

#hero .item:first-child{
	text-align:right;
	padding-left:20px;
	padding-right:20%;
}

#hero .item:nth-child(2) h2{
	margin-top:80px;
}

#hero .item:nth-child(2) img{
	right:auto;
	top:25px;
	left:15px;
	height:450px;
}

#hero .item h2{
	font-size:28px;
	margin-top:40px;
	width:100%;
}

#hero .item h3{
	font-size:18px;
	width:100%;
}

#hero .item p{
	max-width:none;
}

#hero .item .price.real{
	font-size:36px;
	margin-top:8px;
}

#hero .item .price.barre{
	font-size:24px;
}

#hero .item .note{
	background:url(img/triangle.png) no-repeat;
	background-size:100%;
	color:#eecda2;
	width:90px;
	height:90px;
	text-align:center;
	display:inline-block;
	margin-top:20px;
	padding-top:25px;
	font-size:30px;
	line-height:1;
	position:relative;
	cursor:pointer;
}

#hero .item .note.parker:after{
	content:'PARKER';
	font-size:9px;
	display:block;
	margin-top:-3px;
}

#hero .item .note.hachette:after{
	content:'HACHETTE';
	font-size:9px;
	display:block;
	margin-top:-3px;
}

#hero .item .note.gaultmillau{
	padding-top:33px;
}
#hero .item .note.gaultmillau:after{
	content:'Gault & Millau';
	font-size:14px;
	display:block;
	margin-top:35px;
	color:#443D37;
}

#hero .item .note.gilbertgaillard{
	padding-top:33px;
}
#hero .item .note.gilbertgaillard:after{
	content:'Gilbert et Gaillard';
	font-size:14px;
	display:block;
	margin-top:35px;
	color:#443D37;
}


.appear{
	-webkit-animation:pop 0.4s ease-in-out;
	animation:pop 0.4s ease-in-out;
}

.appearlong{
	-webkit-animation:pop 0.7s ease-in;
	animation:pop 0.7s ease-in;
}

@-webkit-keyframes pop{
	from{
		opacity:0;
	}
	
	to{
		opacity:1;
	}
}

@keyframes pop{
	from{
		opacity:0;
	}
	
	to{
		opacity:1;
	}
}

/* popup */

#popup{
	position:absolute;
	background:#242424;
	border:1px solid gainsboro;
	z-index:900;
	top:0;
	box-shadow:0 5px 16px rgba(0,0,0,0.4);
	width:450px;
	height:300px;
	border-radius:6px;
	display:none;
}

#popup::before{
	content:'';
	display:block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 25px 20px 25px 0;
	border-color: transparent gainsboro transparent transparent;
	position:absolute;
	left:-20px;
	top:30%;
}

#popup::after{
	content:'';
	display:block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 24px 19px 24px 0;
	border-color: transparent #242424 transparent transparent;
	position:absolute;
	left:-19px;
	top:30%;
	margin-top:1px;
}

#popup input{
	width:90%;
	margin:5%;
	color:white;
	border:1px solid gray;
	background:black;
	font-size:14px;
	padding:4px;
	font-family:Helvetica, Arial, sans-serif;
	border-radius:3px;
	outline:none;
}

#packshots{
	position:absolute;
	top:60px;
	bottom:20px;
	left:30px;
	right:0px;
	overflow-x:scroll;
}

#packshots img{
	height:100%;
	margin-right: 20px;
	cursor:pointer;
}

#presse{
	position:absolute;
	background:#EEE;
	border:1px solid #AEAEAE;
	z-index:900;
	top:0;
	box-shadow:0 5px 16px rgba(0,0,0,0.4);
	width:300px;
	height:80px;
	border-radius:6px;
	display:none;
	font-family:Helvetica, Arial, sans-serif;
	padding:20px;
}

#presse div{
	display:table;
	padding:5px 10px;
}

#presse label, #presse input, #presse select{
	display:table-cell;
}


#presse label{
}
#presse input{
	width:60px;
	margin:0 10px;
}

#presse button{
	background:gray;
	color:white;
	border:0;
	border-radius:0;
	font-family:Helvetica, Arial, sans-serif;
	padding:3px;
	outline:none;
}

#presse::before{
	content:'';
	display:block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 25px 20px 25px 0;
	border-color: transparent #AEAEAE transparent transparent;
	position:absolute;
	left:-20px;
	top:50%;
	margin-top:-25px;
}

#presse::after{
	content:'';
	display:block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 24px 19px 24px 0;
	border-color: transparent #EEE transparent transparent;
	position:absolute;
	left:-19px;
	top:50%;
	margin-top:-24px;
}

#toolbox{
	position:fixed;
	height:40px;
	background:rgba(255, 255, 255, 0.9);
	border-bottom:1px solid gainsboro;
	top:0;
	left:0;
	right:0;
	z-index:400;
	text-align:right;
	display: none;
	padding: 5px;
}

.editable #toolbox{
	display: block;
}

#toolbox button{
	outline:none;
	background: #619BFC;

	color: white;
	border-radius: 0;
	border: 0;
	font-size: 0.9em;
	padding: 0 1.2em;
	height: 2.4em;
	line-height: 2.3em;
	position: relative;
	overflow: visible;
	display: inline-block;
	vertical-align: top;
	text-decoration: none;
	cursor: pointer;
	border:1px solid #619BFC;
}

#toolbox button:hover{
	color:#619BFC;
	background: white;
}


#fileOpen{
	position:fixed;
	top:0;
	left:50%;
	width:70%;
	height:80%;
	margin-left:-35%;
	box-shadow:0 6px 32px rgba(0,0,0,0.4);
	display:none;
	border:0;
	z-index:900000;

	animation: openDown 0.35s cubic-bezier(.22,.26,.22,.99);
}

.dropOver{
	border:1px solid #7EDC34 !important;
}

@keyframes openDown{
	from{
		transform:translate3d(0, -300px, 0);
		opacity:0.7;
	}
	
	to{
		transform:translate3d(0, 0, 0);
		opacity:1;
	}
}


#preview.inactive #rows{
	display: none;
}

#preview.inactive h1, 
#preview.inactive h4,
#preview.inactive p.sub{
	display: none;
}

#horspromo{
	display: none;
	text-align: center;
	margin:150px auto 200px;
	color:#d78b1e;
}

#preview.inactive #horspromo{
	display: block;
	font-size: 22px;
}