:root {
  --primary: #336784;
  --secondary: rgb(28,72,83);
  --pblack: #000;
  --pwhite: #FFF;
  --pwidth: 980px;
  --buttoncolour: rgb(237, 240, 255);
}


/*-----------------------------------*/

.thumbsize {
	width: 200px;
}

.largesize {
	width: 900px;
}

.product {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

/* Left column */
.media {
  width: 200px;
}

/* Zoom container */
.zoom {
  position: relative;
}

/* Thumbnail */
.zoom summary {
  list-style: none;
  cursor: zoom-in;
}

.zoom summary::-webkit-details-marker {
  display: none;
}

/* Invisible click layer when open */
.zoom[open] summary {
  position: fixed;
  inset: 0;
  opacity: 0;
  z-index: 3;
  cursor: zoom-out;
}

/* Remove zoomed image from layout */
.zoomed {
  position: fixed;
  inset: 0;
  max-width: 90vw;
  max-height: 90vh;
  margin: auto;
  z-index: 2;
}



.cbimage {
	width: 243px;
	padding-left: 55px;
}

.step{
	width: 230px;
}

#wrapper {
    width: 100%;
    max-width: 980px; /* keeps it from getting too wide on desktop */
    margin: -24px auto 0 auto;
}

@media (max-width: 600px) {
    #wrapper {
        width: 100%;
        margin: 0 auto;
        padding: 0 10px;
    }
}


* {
	margin: 0;
}

a {
	text-decoration: underline;
	color: #336784;
	
}

a:hover {
	text-decoration: none;
}


#promo{
float:right; 
position: absolute;
top: 50px;
right: 20px;
margin-top:5px;
margin-bottom:5px;
padding-right:5px;
padding-left:5px;
background-color:#F5F5F5;
}

.callmeal {
	display:none;text-align:justify;
}

.cg {
	color: green;
}

.cr {
	color: red;
}

.co {
	color: orange;
}

.fwb {
	font-weight:bold;
}

.db {
	display:block;
}

.taj {
	text-align:justify;
}

.omgggcool {
	resize:vertical; width: 203px;
}

.w180 {
	width: 180px;
}

.w203 {
	width: 203px;
}

.w205 {
	width: 205px;
}

.ml10 {
	margin-left:10px;
}

.fabu {
	padding:50 0 100 0;
}

.stufff {
	padding-right:20px;display:inline; height:50px; position: relative;top: -45px;z-index: 100000;
}

.tac {
	text-align:center;
}

.plo5em {
	padding-left: 0.5em;
}

.lotsalol {
	height: 32px; width: 32px; vertical-align:middle;
}

html, body { height: 100%;
}

body {
	color: #595350;
	line-height: 1.5em;
	background: url("images/home-background.jpg") no-repeat fixed 50% 0% transparent;
	font-size: 12pt;
}

body,input {
	font-family: Kreon, sans-serif;
	font-size: 12pt;

}

br.clearfix {
	clear: both;
}

strong {
	color: #000;
}

h1,h2,h3,h4 {
	font-weight: normal;
}



h1 {
	font-size: 2.25em;
	color: rgb(28, 72, 83);
	text-align:left;
	margin-bottom: 1.75em;
	
}

h2{	color: #000;}

.big{font-size: 2.25em;
	color: rgb(28, 72, 83);
	text-align:left;
	margin-bottom: 1.25em;}


h3,h4 {
	text-decoration:underline;
}

h3 {
	font-size: 1.25em;
}

h4 {
	font-size: 1.5em;
}

img.alignleft {
	margin: 5px 20px 20px 0;
	float: left;
}

img.aligntop {
	margin: 5px 0 20px 0;
}

p {
	margin-bottom: 1.75em;
}

.post {	margin: 0 0 40px 0;
text-align:justify

}

#content {
	background: #FFF;
	width: 700px;
	padding: 40px;
	float: left;
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
		background:transparent;
}

.content {

	background-image:url('css/images/sdfsdf.png');	background-repeat: no-repeat;

}

.description{

text-align:justify; text-justify:newspaper


}
.amazing {
	overflow:hidden;display: inline-block;vertical-align:top;padding:0 20px 0 0; text-align:justify;
}

.wowzerinos{
	text-decoration:none;color:#000;
}
.loveit {
	width:201px;padding-left:35px;
}
.wowcool {
	width: 243px; padding-left: 55px;
}
.padme {
	padding:0px 230px;
}
.livre{line-height:1em;}


.clearfooter {clear: both; }

#footer-wrapper{height:420px;background:rgb(255,255,255);padding: 30px 0 90px 0;text-align: left;width:1000px;margin:auto;}

#footer {


	background:rgb(255,255,255);
	
	color: #000;
	text-shadow: 1px 1px 0px rgba(255,255,255,0.75);
}
#footer a {
	color: rgb(51, 103, 132);
	text-shadow: 1px 1px 0px rgba(255,255,255,0.25);
}
#footer p {
	overflow: hidden;
	margin: 0;
	padding-top: 20px;
	line-height: normal;
	text-align: center;
	color: #FFFFFF;
}

#footer p {
	overflow: hidden;
	margin: 0;
	padding-top: 20px;
	line-height: normal;
	text-align: center;
	color: #FFFFFF;
}

#footer ul{list-style-type:circle;}

#footer h1 {
	font-family: Carleton, Kreon, sans-serif;
	font-size:1.5em;

}

#footer h2 {
	padding: 0px 0px 30px 0px;
	text-transform: uppercase;
	font-size: 24px;
}

#footer #fbox1 {
	float: left;
	width: 600px;
	margin-right: 30px;
}

#footer #fbox2 {
	float: left;
	width: 220px;
}

#footer #fbox3 {
	float: right;
	width: 220px;
}

.editorbar {
    color: rgb(255, 0, 0);
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    background-color: rgb(255, 0, 0);
    text-align: right;
}



#header {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	height: 50px;
	position: relative;
	width: 980px;
}

#logo {
	position: absolute;
	top: 80;
	left: 20px;
	height: 102px;
	margin-top: 5px;
	padding:20px;
	padding-top:10px;
	background-color:#F5F5F5;
}


.logo a {
	color: #000;
	text-decoration:none;
}

.logo h1 {
	font-family:  Kreon, sans-serif;
	padding: 0px 0px 0px 0px;
	font-size: 2.5em;
	text-shadow: 1px 1px 0px rgba(255,255,255,0.9);
	text-transform:uppercase
}

/*-------------------NAV START----------------------*/

nav {
	margin: 48 0 0 0;
	text-align: center;
	
}

nav ul ul {
	display: none;
}

nav ul li:hover > ul {
	display: block;
}


nav ul {
	background: rgb(28,72,83);
	box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.25), 0px 0px 6px 0px rgba(255,255,255,0.9);
	padding: 0 0px;
	list-style: none;
	position: relative;
	display: inline-table;
	width: 980px;
	z-index:500;
	line-height: 50px;
	height: 50px;
	
	margin-top:-24px;
}
nav ul:after {
	content: ""; clear: both; display: block;
}

nav ul li {
	float: left;
	
}
	nav ul li:hover {
		background: #336784;
	}
		nav ul li:hover a {
			color: #fff;
		}
		
	nav ul li a {
		display: block; 
		padding: 0px 14px;
		color: #FFF; 
		text-decoration: none;
		z-index:5000;
	}
			
		
nav ul ul {
width:150px;padding: 0px 14px;
	background: rgb(28,72,83); padding: 0;
	position: absolute; top: 148%;
}
	nav ul ul li {
		
		float: none; 
		border-top: 1px solid #6b727c;
		border-bottom: 1px solid #575f6a; position: relative;
	}
		nav ul ul li a {
			padding: 0px 0px;
			background: rgb(28,72,83);
			color: #fff;
		}	
			nav ul ul li a:hover {
				background: #336784;
			}
		
nav ul ul ul {
	position: absolute; left: 100%; top:0;
}

/*-------------------NAV END----------------------*/

.zepanier  a{
background: transparent url(/css/images/Panier.png)  scroll no-repeat left center;
padding: 2px 0px 2px 25px;

}

.bouton{
	margin-left: 1em;
	background-color: var(--buttoncolour);
	border: 0;
	color: var(--pblack);
	padding: 7px;
	box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.9), 0px 0px 6px 0px rgba(255,255,255,0.9);
	cursor: pointer;
	width: fit-content;
	text-decoration-line: none;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.lsn {
	list-style: none;
}
.backo{
	float:left;
	line-height: normal;
}

.w940{
	width: 940px;
}

.nexto{
text-align:left;
background-position:right;
font-size: 16px;
font-family: Kreon, sans-serif;
}

.thisok{width:225px;text-align:left;}

.panier{
width:160px;
text-align:center;

}

.ajouter{
width:160px;
text-align:center;

}

.supprimer{
width:160px;
text-align:center;

}
#page {
	width: 980px;
	padding: 0;
	margin: 20px 0 20px 0;
	position: relative;
}

#page .section-list {
	list-style: none;
	padding-left: 0;
}

#page .section-list li {
	clear: both;
	padding: 25px 0 25px 0;
}

#page ul {
	list-style: none;
}

#page ul li {
	border-top: solid 1px #B8B8B8;
	padding: 15px 0 15px 0;
}

#page ul li.first {
	padding-top: 0;
	border-top: 0;
}

#col1 {
	float: left;
	width: 330px;
	
	overflow: hidden;
	margin: 0px 0px 10px 10px;
	padding: 10 20 10 20;
	
}

#col1a {
	float: left;
	width: 300px;
	overflow: hidden;
	margin: 0px 0px 10px 10px;
	padding: 10 30 10 30;
	
}

#col1commande {
	float: left;
	width: 590px;
	
	overflow: hidden;
	margin: 0px 0px 10px 10px;
	padding: 10 20 10 20;
	
}

#col2 {
	float:right	;
	width: 400px;
	overflow: hidden;
	padding: 20 20 0 0;
}
#col2a {
	float:right;
	width: 140px;
	overflow: hidden;
	padding: 20 20 0 0;
}
#col3 {
	float:right;
	width: 140px;	
	overflow: hidden;
	padding: 20 20 0 0;
}

#search {
	top: 18px;
	position: absolute;
	right: 20px;
	z-index: 1000;
}

#Form tr{

border: solid 1px #000;

}

#Form td{
padding: 7px;
border: solid 1px #000;

}

#Form input submit{
padding: 7px;
border: solid 0px #000;

}

.search input.form-submit {
	background: #336784 url(images/bg3_loupe.jpg);
	
	border: 0;
	color: #FFF;
	padding: 7px 7px 7px 32px;
	text-shadow: 1px 1px 0px rgba(0,0,0,0.5);
	box-shadow: inset 0px 0px 5px 0px rgba(255,255,255,0.9);
	
}

.search input.form-text {
	padding: 8px;
	border: 0;
	background: rgb(255,255,255);
	box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.9);
	color: #000;
	width: 200px;
	
}



#fond{
	background-color: rgba(62,59,57,0.8);
	padding: 0px 20px 20px 20px;
	margin: 9px 0px 0px 0px;
}

#splash {	
	float:left;
	padding: 20px;
	position: relative;
	background: #FFF;
	margin: 0px 20px 20px 20px;
	width: 570px;
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
}

#diapo {
	float:left;
	position: relative;
	margin: 0 0 0 0;
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
}

.splash {
min-height:720px;
text-align:left;
	padding: 20px 20px;
	position: relative;
	background: #FFF;
	width: 900px;
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);

}

.splash2{
text-align:left;
	padding: 20px 20px;
	position: relative;
	background: #FFF;
	width: 900px;
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
}

#sidebar {
	margin: 0 0 0 653px;
	background: rgba(62,59,57,0.7);
	width: 267px;
	height:460px;
	padding: 20px;
	color: #CCCCCB;
	box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.5), 0px 0px 6px 0px rgba(255,255,255,0.9);
	text-shadow: 1px 1px 0px rgba(0,0,0,0.4);
}

#sidebar a {
	color: #FFF;
}

#sidebar h2, #sidebar h3, #sidebar h4 {
	color: #FFF;
}

#sidebar ul {
	list-style: none;
}

#sidebar ul li {
	padding: 15px 0 15px 0;
	border-top: solid 1px #8F8F8E;
}

#sidebar ul li.first {
	border-top: 0;
	padding-top: 0;
}



.premiere{

float:left;
box-shadow: 10px 10px 5px #888888;

}

@media only screen and (min-width:0px){
        #testlol {
    height: 0px;
	
}
}
@media only screen and (min-height:700px){
        #testlol {
    height: 350px;
}
    }

    .titre_options{
        z-index:100000;
        display: none;

    }
    .titre_options:hover{
        z-index:100000;
        display: block;
    }

    .titre_options_button{
            z-index: 100000;
            width: 71%;
            text-align: center;
            position: absolute;
            background-color: rgb(28,72,83);
            margin: 20px 16px;
            margin: 20px 11%;
            padding: 6px;
            color: #FFF;
            opacity: 0.93;
    }
    
    .titre_options_button_1{
            top: 100px; 
    }
    .titre_options_button_2{
            top: 155px; 
    }
    .titre_options_button_2 a{
            text-decoration: none !important;
            color:white !important;
        }
    .titre_options_button_3{
            top: 210px; 
    }
#header, nav ul, #footer-wrapper {
    width: 100%;
	max-width: 980px;
}