@import url('https://fonts.googleapis.com/css?family=Anton');
@import url(https://fonts.googleapis.com/css?family=Lobster);
@import url(https://fonts.googleapis.com/css?family=Open Sans);
@import url(https://fonts.googleapis.com/css?family=Lato);
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
@import url('https://fonts.googleapis.com/css?family=Quicksand');
@import url('https://fonts.googleapis.com/css?family=Questrial');
@import url('https://fonts.googleapis.com/css?family=Bangers');
@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
@import url('https://fonts.googleapis.com/css?family=Grand+Hotel');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,400,700');

/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

/*MAIN*/
body { 
	font-family:'Open Sans', Lato, Helvetica Neue, Helvetica, Arial;
	font-size:1em;
	line-height:1.5em;
	color:#000;
	text-align:center;
    	background-size: 100% auto;
 	background:#fff;
/* 	background:#fff url(../images/bg-top-home.jpg) no-repeat top center;*/
}

a {
	font-family:'Open Sans', Lato, Helvetica Neue, Helvetica, Arial;
	font-weight:100;
	font-size:1em;
	color:#000;
	text-decoration:none;
	text-transform:none;
/*	-webkit-transition:color .5s ease;*/
/*	-moz-transition:color .5s ease;*/
/*	-ms-transition:color .5s ease;*/
/*	-o-transition:color .5s ease;*/
/*	transition:color .5s ease;*/
}

a:hover {
	color:#000;
}

header {
	position:absolute;
	top:0;
	z-index:100;
	background:#000;
	color:#fff;
	width:100%;
	padding:0;
	font-weight:600;
	text-align:center;
/*	border-bottom:5px solid #000;*/
}

header a {
	color:#fff;
	font-size:1.00em;
	font-weight:600;
	letter-spacing:0.10em;
	text-transform:uppercase;
/*	border:solid 1px #000;*/
}

header a:hover{
	color:#7C8BAA;
}

#logo {
	margin:0;
	padding:50px 0;
	background-color:#253863;
	color:#fff;
	float:left;
	width:100%;
	display:block;
	text-align:center;
	line-height:2.20em;
	letter-spacing:1.5em;
/*	text-shadow: 3px 3px 3px #000;*/
/*	border:solid 5px blue;*/
}

#logo a {
	font-family: Anton, Lato, Helvetica Neue, Helvetica, Arial;
	font-size:2.00em;
	font-weight:100;
/*	font-style:italic;*/
	letter-spacing:0.10em;
	text-transform:uppercase;
/*	text-shadow: 2px 2px 2px #526588;*/
	padding:0;
	color:#fff;
/*	background-color:#D5E3FD;*/
/*	border-radius:2px;*/
}

.slogan {
	font-family:'Anton', 'Fjalla One', 'Questrial', 'Open Sans', 'Quicksand', 'Source Sans Pro', 'Open Sans', Lato, Helvetica Neue, Helvetica, Arial;
	font-size:1.20em;
	font-weight:100;
	letter-spacing:0.25em;
	color:#fff;
	text-transform:uppercase;
	padding:2px 15px;
	background-color:#253863;
/*	border-radius:2px;*/
/*	box-shadow: 4px 4px 4px #000;*/
	border:solid 3px #A7B0C1;
}

nav {
/*	float:left;*/
	text-align:center;
	padding:0;	
/*	background-color:#000;*/
}

#menu-icon {
	display:hidden;
	margin:5px 0 0 0;
	width:90px;
	height:45px;
	background:#000 url(../images/menu-icon.png) center;
/*	border:solid 1px #fff;*/
}

a:hover#menu-icon {
/*	background-color:#AE0500;*/
/*	border-radius:0;*/
}

ul {
	list-style:none;
}

li {
	display:inline-block;
/*	float:left;*/
	padding:20px;
}

section {
	margin:200px auto 50px auto;
	padding:50px 0;
	max-width:80%;
	position:relative;
	background:#fff;
}

h1 {
 	color:#000;
	background:#f9f9f9;
	font-size:1.30em;
	font-weight:100;
	letter-spacing:0.05em;
	text-shadow: 1px 1px 1px #fff;
	text-transform:uppercase;
	margin:20px 0;
	padding:20px 10px;
	border-radius: 15px;
	-moz-border-radius:15px;
    	-webkit-border-radius:15px;
}

h2 {
 	color:#000;
    	font-size:1.00em;
    	font-weight:100;
    	letter-spacing:0.10em;
    	text-transform:uppercase;
	padding:0;
}

h3 {
 	color:#000;
	background:#f0f0f0;
    	font-size:1.00em;
    	font-weight:900;
    	letter-spacing:0.10em;
	text-shadow:1px 1px 1px #fff;
    	text-transform:uppercase;
	margin:20px 0;
	padding:15px 5px;
    	border-radius:5px;
	-moz-border-radius:5px;
    	-webkit-border-radius:5px;
}

p {
	margin:0;
	padding:20px 10px;
	text-align:justify;
}

p a {
/*	color:#222;*/
	font-weight:100;
   	text-transform:none;
    	border-bottom:1px solid #7C8BAA;
/*    	border-bottom:2px dotted #7C8BAA;*/
}

p a:hover {
	color:#7C8BAA;
}

.current {
	color:#7C8BAA;
}

.cmdb2b {
	color:#CA0505;
}

.tarif a {
	color:#fff;
	background:#000;
	padding:10px;
    	text-transform:uppercase;
	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
    	border-radius: 5px;
    	border-bottom:none;
}

.tarif a:hover {
	color:#76BB58;
}

.greenbyhappysnack {
	color:#487B7B;
	text-transform:uppercase;
	padding:3px;
	border:1px solid #487B7B;
}

.greybyhappysnack {
	color:#242D40;
	text-transform:uppercase;
	padding:3px;
	border:1px solid #242D40;
}

.redbyhappysnack {
	color:#CA0505;
	text-transform:uppercase;
	padding:3px;
	border:1px solid #CA0505;
}

.redbyhappysnackwithoutborder {
	color:#FF9D89;
	text-transform:uppercase;
	padding:3px;
}

.mot-accrocheur {
	font-family:'Grand Hotel', Lato, Helvetica Neue, Helvetica, Arial;
	font-size:1.50em;
}

img {
	width:100%;
}

.img-catalogue {
	width:225px;
	height:275px;
}

.img-vector {
	width:55px;
	height:55px;
}

.liv {
    	color:#487B7B;
  	padding:2px 10px;
  	background:#C2DCDC;
    	text-transform:uppercase;
}

.frais {
    	color:#344D8A;
  	padding:2px 10px;
  	background:#BDCDF3;
    	text-transform:uppercase;
}

.dlc {
    	color:#242D40;
  	padding:2px 10px;
  	background:#C2C8D4;
    	text-transform:uppercase;
}

.cuisson {
    	color:#986055;
  	padding:2px 10px;
  	background:#F1CBC4;
    	text-transform:uppercase;
}

.stock {
    	color:#285252;
  	padding:2px 10px;
  	background:#A3C5C5;
    	text-transform:uppercase;
}

.colis {
    	color:#7B5C3C;
    	padding:2px 10px;
  	background:#E2CAB2;
    	text-transform:uppercase;
}

.cmd {
    	color:#CA0505;
  	padding:2px 10px;
  	background:#EFCFCF;
    	text-transform:uppercase;
}

.produit {
    	color:#000;
    	text-transform:uppercase;
    	font-weight:bold;
}

.hr {
	border: 1px solid #555;
/*    	margin: 0 150px;*/
/*	border-radius:5px 0;*/
}

footer {
	width:100%;
	color:#fff;
	background:#000;
	text-align:center;
	margin:0;
	padding:0 0 50px 0; 
	border-bottom:10px solid #444;
}

footer a {
	color:#fff;
	font-size:0.90em;
	font-weight:100;
	letter-spacing:0.10em;
	text-transform:uppercase;
	border-bottom:none;
}

footer a:hover{
	color:#7C8BAA;
}

#hautdepage {
	position:fixed;
	bottom:10px;
	right:10px;
	padding:10px;
	z-index:90;
	text-align:center;
}

#hautdepage a {
	padding:8px;
	font:bold 50px/100% Arial, Tahoma;
	color:#444;
	text-decoration:none;
	text-transform:none;
	-webkit-transition:color .5s ease;
	-moz-transition:color .5s ease;
	-ms-transition:color .5s ease;
	-o-transition:color .5s ease;
	transition:color .5s ease;
}	

#hautdepage a:hover {
 	color:#A7B0C1;
	-webkit-transition:color .5s ease;
	-moz-transition:color .5s ease;
	-ms-transition:color .5s ease;
	-o-transition:color .5s ease;
	transition:color .5s ease;
}

/*MEDIA QUERY*/
@media only screen and (max-width:1320px) {

	header {
		position:absolute;
	}

	#menu-icon {
		display:inline-block;
	}

	nav ul, nav:active ul { 
		display:none;
		position:absolute;
		padding:0;
/*		top:240px;*/
		right:0;
		width:100%;
    		background-color:#000;
		border-bottom:10px solid #253863;
		border-radius:0;
	}

	nav li {
		text-align:center;
		width:100%;
		padding:10px 0;
		margin:0;

	}

	nav:hover ul {
		display:block;
	}
}

/*END OF CSS*/