@charset "utf-8";
/* Global Styles */
:root {
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	font-size: 1em;
	--p-n:rgba(76,117,139,1); /* #4c758b */
	/* --p-l:rgba(174,210,231,1.00); /* #aed2e7 */
	--p-l:rgba(154,188,207,1.00); /* #9abccf */
	--p-d:rgba(49,86,103,1); /* #315667 */
	--g-n:rgba(153,153,153,1); /* #999999 */
	--g-d:rgba(51,51,51,1); /* 333333 */
	--g-l:rgba(240,240,240,1); /* cccccc */
	--s-n:rgba(230,80,0,1); /* Anciennement (255,130,30,1), mais trop coloré ! */
	--s-l:rgba(255,204,102,0.5); /* #ffcc66 */
	--s-d:rgba(230,80,0,1); /* #ff6600 */
	--errordark: rgba(150,0,0,1); /* #cc0000 */
	--error: rgba(190,100,100,0.5);
	--ok: rgba(100,190,100,0.5); /* #006600 */
	--okdark: rgba(0,75,0,1); /* #006600 */
}
a, a:link, a:visited, a:visited, a:active {
	color: var(--p-n);
	cursor: pointer;
	text-decoration: none;
}
a:hover, a:active, a:focus {
	color: var(--p-d);
}
form.logs fieldset.half {
    width:45%;
    border:1px solid #888;
    border-radius: 0px 10px 10px 10px;
    margin:10px 0px;
}
form.logs fieldset.full {
    width:95%;
    border:1px solid #888;
    border-radius: 0px 10px 10px 10px;
    margin:10px 0px;
}
form.logs {
    margin:0;
}  
form.logs input, form.logs select, form.logs textarea {
    width:85%;
}
form.logs .left, form.logs .right {
    width:45%;
}
form.logs .left input, form.logs .right input {
    width:90%;
}
form.logs fieldset legend {
    padding:2px 7px;
    margin:1px;
    border:1px solid #888;
    border-radius:4px;
}
.mainContent a, .mainContent a:link, .mainContent a:visited, .mainContent a:active, .mainContent a:focus {
	text-decoration: underline !important;
	color: var(--p-n) !important;
}
.mainContent a:hover {
	text-decoration: none !important;
	color: var(--p-n) !important;
}
.actif a, .actif a:link, .actif a:visited  {
	color: var(--g-l) !important;
	text-decoration: underline !important;
}
.actif a:hover, .actif a:active, .actif a:focus {
	color: var(--p-l) !important;
}
a div.question {
	text-decoration: none !important;
}
.double {
	float: left;
	width: 48%;
	margin: 5px;
	background-color: none;
}
.double input, .double select, .double textarea {
	width:90%;
}
#mobilephonewarn {
	display: none;
}
h3 {
	clear:both;
	margin-bottom:30px;
	border-bottom: 1px solid var(--p-n);
	font-variant: small-caps;
	padding-top:30px;
	text-align:left;
}
.actif h3 {
	clear:both;
	margin-bottom:15px;
	border-bottom: 1px solid var(--g-l);
	font-variant: small-caps;
	padding-top:5px;
}
.item {
	flex: 1 1 auto;
	margin: auto;
	width: calc(50%);
}
.question, .questionread {
	border-radius: 50px 50px 50px 0px;
	padding: 25px;
	margin-bottom:30px;
}
.question {
	margin: 25px;
	background-color: var(--g-l);
}
.questionread {
	margin:50px;
	background-color: var(--p-l);
}
.answer {
	border-radius: 50px 0px 50px 50px;
	padding:6%;
    width:80%;
	/* background-color: var(--p-l); */
}
.answer a, .answer a:link {
    font-weight: bold;
    cursor:help;
}
.answer h3 {
    margin:5px 0px;
    font-variant: normal;
    padding:0;
}
.answer ul, .answer ol {
    padding-left:25px;
}
.answer ul li, .answer ol li {
    padding-right:10px;
}
a .question, .item a .question, a:link .question, .item a:link .question {
	text-decoration: none !important;
}
.illustration {
    margin:0px 7px 5px 0px; padding:0; min-width:420px; max-width:45%; float:left;
}
.illustration img {
    border-radius:8px; margin:0; padding:0; width:95%;
}
.illustration figcaption {
    font-size:0.8em;
}
img.insidetxt {
	max-width:45%;
	border-radius:10px;
	float:left;
	position:relative;
	margin-right:35px;
}
.shadowed {
	box-shadow: 0px 0px 18px 1px rgba(0,0,0,0.2);
}
.closing {
	cursor:none;
}
.add1tocart, .sub1tocart {
	border:1px solid var(--g-d);
	padding:5px 10px;
	position:relative;
	background-color: var(--p-n);
	cursor:pointer;
	font-size:1.2em;
}
.add1tocart {
	border-radius:0px 4px 4px 0px;
	margin-left:-6px;
	border-left:none;
	margin-right:20px;
}
.sub1tocart {
	border-radius:4px 0px 0px 4px;
	margin-right:-2px;
	border-right:none;
}
.inthecart {
	border:1px solid var(--g-d);
	padding:6px 12px;
	position:relative;
	background-color: var(--p-n);
	font-size:1.4em;
	border-radius:4px;
	z-index:2;
}
.add1tocart:hover, .sub1tocart:hover {
	background-color: var(--p-l);
	color:#000;
}
.quantityformats {
	border:1px solid var(--g-d);
	border-radius:8px;
	margin:0 12px;
	z-index:2;
	padding:5px 10px;
	position:relative;
}
.inactif {
	background-color: var(--g-l);
	color: black;
}
.actif {
	background-color: var(--p-n);
	color: var(--g-l);
}
.warning {
	border: 3px solid var(--errordark);
}
.special {
	background-color: var(--s-n);
	color: var(--g-l);
}
.obvious {
	padding:15px;
	font-size: 1.5em;
}
.paymentmethod {
	border-radius:16px;
	width:auto;
	max-width:300px;
	height:auto;
	padding:10px;
	margin:auto;
	text-align:center;
	background-color:#FFF;
	border:1px solid #000;
	display: block;
}
.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
}
.pagination > li {
  display: inline;
}
.pagination > li > a,
.pagination > li > a:link,
.pagination > li > a:visited,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: var(--g-l) !important;
  text-decoration: none !important;
  background-color: var(--p-n);
  border: 1px solid var(--g-l);
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  z-index: 2;
  color: var(--g-l) !important;
  background-color: var(--p-l);
  border-color: var(--p-n);
}
.pagination > .active > a,
.pagination > .active > a:link,
.pagination > .active > a:visited,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
	z-index: 3;
	color: var(--g-d);
  	cursor: default;
	background-color: var(--p-l);
	border: 1px solid var(--p-n);
	text-decoration: none !important;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:link,
.pagination > .disabled > a:visited,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
  color: var(--g-d) !important;
  cursor: not-allowed;
  background-color: var(--g-l);
  border: 1px solid var(--g-d);
}
.pagination-lg > li > a,
.pagination-lg > li > span {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
}
.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.box, .boxdouble, .boxcustom {
	padding: 2%;
	border-radius: 4px;
	text-align: left;
}
.box {
	width:79%;
	margin: 10px 10% 25px 10%;
	display: inline-block;
}
.boxdouble {
	width: 40%;
	margin: 10px 2%;
}
.boxcustom {
	float: left;
	width: auto;;
	margin: 10px 2%;
}
input, textarea, select {
	padding:15px;
	border-radius: 4px;
	border-style: none;
	font-size: 1.2em;
	position: relative;
	left:-8px;
	display: inline-block;
	margin: 10px 10px 0px 10px;
	background-color: var(--g-l);
}
input:valid, textarea:valid, select:valid {
    border:1px solid #090;
}
input:invalid, textarea:invalid, select:invalid {
    border:1px solid #900;
}
legend.mainLegend {
	font-size: 1.1em;
	padding:5px;
	border-radius: 8px;
}
legend.helpLegend {
	font-size: 0.9em;
	margin: -1px 0 10px 5px;
	text-align: left;
}
.actif legend.helpLegend {
	color: var(--g-d);
}
.inactif legend.helpLegend {
	color: var(--g-n);
}
input, select, textarea {
	background-color: #FFF;
	border: 1px solid var(--p-l);
}
input:valid, select:valid, textarea:valid {
	border: 1px solid var(--ok);
}
input:invalid, select:invalid, textarea:invalid, input:required, select:required, textarea:required {
	border: 1px solid var(--errordark);
}
input:active, input:focus, input:enabled, select:active, select:focus, select:enabled, textarea:active, textarea:focus, textarea:enabled {
	border: 1px solid var(--p-l);
}
.returnok, .returnerror, .returninfo {
	margin:20px;
	padding:15px;
	border-radius:25px 25px 25px 0px;
	background-color: white;
	/* color: var(--g-d);
	border-width: 1px;
	border-style: solid;
    */
}
.returnok {
	border-color: var(--okdark);
	background-color: var(--ok);
	font-size: 1.1em;
}
.returnerror {
	border-color: var(--errordark);
	background-color: var(--error);
	color:var(--g-d);
	font-size: 1.1em;
}
.returninfo {
	border-color: var(--s-d);
	background-color: var(--s-l);
	color: var(--g-d);
}
.preview {
	color: var(--g-d);
	border-width: 1px;
	border-style: solid;
	margin:5px;
	padding:2px;
	border-radius:4px;
	background-color: white;
	border-color: var(--p-n);
}
.returnok a, .returnerror a, .returninfo a, .returnok a:link, .returnerror a:link, .returninfo a:link {
	color:var(--p-n) !important;
}
#content {
	clear: both;
	overflow: auto;
	padding-top: 29px;
}
#mainWrapper #offer {
	clear: both;
	background-color: var(--p-n);
	color: var(--g-l);
	padding: 10px;
	border-radius: 8px;
	margin: 10px;
	vertical-align: middle;
	box-shadow: 0px 0px 18px 5px rgba(0,0,0,0.2);
}
#mainWrapper #offer h2 {
	font-variant: small-caps;
	font-size:1.5em;
}
#mainWrapper #offer hr {
	height: 1px;
	color: var(--g-l);
	background-color: var(--g-l);
	padding:0;
	border:0;
	clear: none;
	margin:0;
	line-height: 2px;
}
#mainWrapper hr {
	clear:both;
	height: 1px;
	color: var(--p-n);
	background-color: var(--p-n);
	padding:0;
	margin: 25px 0 25px 0;
	border:0;
	line-height: 25px;
	display:block;
	font-size:60px;
}
#mainWrapper #offer a, #mainWrapper #offer a:link {
	text-decoration: none;
	color: white;
}
#mainWrapper #offer a:hover {
	text-decoration: none;
	color: black;
}
#mainWrapper #offer #tips {
	width: 80%;
	margin: auto;
	vertical-align: middle;
}
#mainWrapper #offer #tips #imgcontainer {
	position: relative;
	padding-right:5%;
	float:left;
	top: 0;
}
#mainWrapper #offer #tips #txtcontainer {
	position: relative;
	min-height: 130px;
	font-size: 0.9em;
}
/*header*/
header {
	font-size: 1.2em;
	font-style: normal;
	font-weight: 400;
    display:flex;
    flex-flow:row nowrap;
    justify-content: space-between;
}
/* Logo placeholder*/
#logo {
	padding-top: 10px;
	padding-bottom: 10px;
	/* width: 240px; */
	text-align:left;
	margin:0;
	/*
	color: rgba(255,255,255,1.00);
	background-color: rgba(190,190,190,1.00);
	*/
}
#headerLinks {
	/*
    float: right;
	width: calc( 80% - 240px );
    */
    display:flex;
    flex-flow:row nowrap;
	text-align:right;
	padding:auto;
	padding-bottom: 10px;
	font-size: 0.9em;
}
#headerLinks a.libre {
	text-decoration: none;
	color: var(--g-n);
	padding: 16px;
	padding-left: 66px;
	text-align: left;
	position:relative;
	display: inline-block;
}
#headerLinks a.libre:hover, #headerLinks a.libre:active, #headerLinks a.libre:focus {
	color: var(--p-d);
}

/* Menu déroulant */
.dropbtn { /* Le bouton à cliquer */
    padding: 16px;
    border: none;
    cursor: pointer;
	background: none;
	color: var(--g-n);
	font-size: 0.9em;
}
.dropbtn:hover, .dropbtn:focus, .dropbtn:active {
    background-color: var(--p-l);
	color: var(--g-d);
}
.dropdown { /* le tout, la fonction */
    position: relative;
    display: inline-block;
	overflow: visible;
	word-break: keep-all;
	white-space: nowrap;
}
.dropdown-content { /* le menu qui se déroule */
    display: none;
    position: absolute;
	right: 0;
    background-color: #FFF;
    /* min-width: 160px; */
    overflow: auto;
    z-index: 1;
	font-size: 0.8em;
}
.dropdown-content a {
    color: var(--g-d);
    padding: 12px 16px !important;
    display: block;
}
.dropdown a, .dropdown a:enabled {
	background-color: var(--p-n);
	color: var(--g-l) !important;
}
.dropdown a:hover, .dropdown a:active, .dropdown a:focus {
	background-color: var(--p-l);
	color: var(--g-d) !important;
}
.show { /* nécessaire pour le menu déroulant, doit être placé après les classes du menu */
	display:block;
}
#content .mainContent, #content .smallContent {
	color: var(--g-d);
	float: left;
}
#content .mainContent h1, #content .smallContent h1 {
	color: var(--p-n);
	margin-bottom:40px;
}
#content .mainContent h2, #content .smallContent h2 {
	border-bottom:1px solid var(--p-n);
}
#content .mainContent {
	width: 70%;
	padding-left: 4%;
}
#smallWrapper #content .smallContent {
	width: 96%;
	text-align: center;
	padding: 1%;
	margin:1%;
}
/*menubar's properties for menus in sidebar */
#content .sidebar #menubar {
	text-align: left;
	color: var(--g-d);
	position: relative;
	left: 0%;
}
#content .sidebar #menubar nav {
	position: relative;
	left: -7%;
	padding-top: 0px;
	width: 100%;
	text-align: left;
	top: 16px;
	margin-bottom: 29px;
	display: block;
}
/* Sidebar */
#content .sidebar {
	color: var(--g-d);
	float: left;
	width: 20%;
	padding-left: 3%;
	background-color: var(--g-l);
	border-radius: 8px;
	margin: 10px;
	margin-bottom:25px;
	
}
.sidebar #menubar .menu {
	margin-bottom: 40px;
}
.sidebar #menubar .menu ul li {
	background-color: var(--p-n);
	padding:10px 15px;
	border:1px solid var(--p-n);
	border-radius: 4px;
	margin-bottom: 5px;
	list-style-type: none;
	font-size: 1.1em;
	position: relative;
	left: -35px;
	width: 100%;
	color: var(--g-l);
}
.sidebar #menubar .menu ul.galleries li, .sidebar #menubar .menu ul.galleries li:hover {
	background-color: var(--g-n);
	padding:10px 15px;
	border:1px solid var(--p-n);
	border-radius: 4px;
	margin-bottom: 5px;
	list-style-type: none;
	font-size: 1.1em;
	position: relative;
	left: -35px;
	width: 100%;
	color: var(--g-d);
}
.sidebar #menubar .menu ul.galleries li a, .sidebar #menubar .menu ul.galleries li a:link, .sidebar #menubar .menu ul.galleries li a:visited, .sidebar #menubar .menu ul.galleries li a:active {
	color: var(--g-l);
}
.sidebar #menubar .menu ul.galleries li a:hover {
	color: var(--g-d);
}
.sidebar #menubar .menu ul.galleries li div.activegallery {
	font-weight: bold;
	color:var(--g-d);
}
.sidebar #menubar .menu ul li.special {
	background-color: var(--s-d);
	padding:10px 15px;
	border-radius: 4px;
	margin-bottom: 5px;
	list-style-type: none;
	font-size: 1.1em;
	position: relative;
	left: -35px;
	width: 100%;
	color: var(--g-l);
}
.sidebar #menubar .menu ul li:hover, .sidebar #menubar .menu li.active {
	background-color: var(--p-l);
	cursor:pointer;
	color: var(--g-d);
}
.sidebar #menubar .menu ul.galleries li, .sidebar #menubar .menu ul.galleries li:hover {
	cursor:default;
}
.sidebar #menubar .menu ul li.special:hover, .sidebar #menubar .menu li.specialactive {
	background-color: var(--s-l);
	cursor:pointer;
	color: var(--g-d);
	border:1px solid var(--s-d);
}
.sidebar #menubar .menu h2 {
	font-size: 1.4em;
	margin-bottom:1px;
	color: var(--p-n);
	font-variant: small-caps;
}
/* Whole page content */
#mainWrapper {
	width: 80%;
	padding-left: 10%;
}
#smallWrapper {
	width: 95%;
	padding: auto;
	text-align: center;
	margin:auto;
	min-height:600px;
}


/* Product rows for catalog */
.productRow {
	overflow: visible;
}
/* Each product Information in the catalog */
.productRow .productInfo {
	float: left;
	padding-left: 1%;
	padding-right: 1%;
	width: 175px;
	height: 220px;
	border-radius: 10%;
	margin:2%;
}
.productRow .productInfoBig {
	float: left;
	padding-left: 1%;
	padding-right: 1%;
	width: 260px;
	height: 310px;
	border-radius: 10%;
	margin:2%;
	text-align: center;
}
/* Prices of a products in catalog */
.productRow .productInfo .price {
	color: var(--p-d);
	position: relative;
	top: -20px;
}
/* Content holder for products in catalog*/
.productRow .productInfo .productContent, .productRow .productInfoBig .productContent {
	position: relative;
	/* top: -37px; */
	font-size: 0.8em;
	font-style: normal;
	font-weight: 200;
	color: var(--g-d);
	/*
	white-space: pre-wrap;
	word-break: keep-all;
	*/
}
/* Buy button for products in catalog */
.buyButton, .formButton, .actionButton {
	position: relative;
	background-color: var(--s-n);
	color: var(--g-l);
	border-style: none;
	font-variant: small-caps;
	border-radius: 4px;
	white-space: nowrap;
	cursor: pointer;
}
.formButton {
	width: auto;
	height:auto;
	padding:15px;
	font-size: 1.1em;
	margin:15px;
}
.buyButton {
	width:auto;
	min-width: 75%;
	height: 35px;
	margin-top: 8px;
	margin:2px;
}
.buttonDisabled {
	background-color: var(--g-n);
}
.actionButton {
	width: auto;
	height: auto;
	margin: 2px;
	padding: 5px 10px;
	font-size: 0.9em;
}
.buyButton:hover, .formButton:hover, .actionButton:hover {
	background-color: var(--s-l);
	color: var(--g-d);
}
.buttonDisabled:hover {
	background-color: var(--g-n);
}
.classButton {
	padding: 5px;
	margin: 3px;
	border-radius: 4px;
	font-size:1.1em;
	border:1px solid var(--g-n);
	cursor:pointer;
}
.classButton:hover, .classButton:active, .classButton:visited {
	background-color: var(--p-l);
	color: var(--g-d);
}
button:disabled, input:disabled {
	cursor:not-allowed;
}
/* Product's images in catalog */
.productInfo div img {
	max-width: 100px;
	max-height: 100px;
	margin-top:15px;
}
.productInfoBig div img {
	max-width: 240px;
	max-height: 240px;
	margin-top:15px;
}
.productImg { /* in the Basket */
	z-index:6;
	display:block;
	position:relative;
	width:99%;
	text-align:center;
	margin:-25px;
	padding:-25px;
	left:0;
	top:0;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-clip: border-box;
}
.productSizeContainer {
	clear:both;
	width:100%;
	vertical-align:middle;
	margin:5px auto;
	padding:auto;
	display:inline-block;
	text-align:center;
}
.productSizeDescr {
	width:45%;
	float:left;
	padding:auto;
	margin:auto;
	white-space:nowrap;
	z-index:2
}
.productPriceSize {
	width:25%;
	padding:auto;
	margin:auto;
	float:left;
	white-space:nowrap;
	z-index:2;
}
.productQtyContainer {
	width:25%;
	padding:auto;
	margin:auto;
	white-space:nowrap;
	float:left;
	z-index:3;
}
#mainWrapper footer {
	clear: both;
	overflow: auto;
	font-weight: 200;
	line-height: 1.8;
	padding: 22px;
	text-align: center;
	color: black;
	margin:50px 10px;
	background-color: var(--g-l);
	border-radius: 8px;
}
#mainWrapper footer div { /* permet de faire trois colonnes dans le pied de page */
	width: 27%;
	float: left;
	padding-left: 4%;
	padding-right: 2%;
	text-align: justify;
}
footer a,
footer a:link,
footer a:visited {
	color: var(--p-n);
	cursor: pointer;
	text-decoration: none;
}
footer a:hover,
footer a:active {
	color: var(--p-d);
}

/* Container for links in footer */
footer .footerlinks {
	margin-top: -15px;
	border-radius: 4px;
}
#quickgo {
	float: right;
	width:30px;
	position:relative;
	cursor: pointer;
	font-size: 2em;
	margin:0;
	margin-top:15px;
	color: #000;
	font-weight: bold;
}
#quickgo:hover {
	color: var(--s-n);
	
}
.trans05{font-size:12px}
.transx2{font-size:48px}
.transx2:before{padding:8px 12px}
.transx3{font-size:72px}
.transx3:before{padding:16px 20px}
.transx4{font-size:96px}
.transx4:before{padding:20px 28px}
.transx5{font-size:120px}
.transx5:before{padding:28px 36px}
.translight:before{color:#f2f2f2}
.transdrop:before{text-shadow:-1px 1px 3px rgba(0,0,0,.3)}
.transflip{-moz-transform:scaleX(-1);-o-transform:scaleX(-1);-webkit-transform:scaleX(-1);transform:scaleX(-1);filter:FlipH;-ms-filter:"FlipH"}
.transflipv{-moz-transform:scaleY(-1);-o-transform:scaleY(-1);-webkit-transform:scaleY(-1);transform:scaleY(-1);filter:FlipV;-ms-filter:"FlipV"}
.transrotate90{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}
.transrotate180{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}
.transrotate270{-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}
/* Media query for tablets */
@media screen and (max-width:700px) {
/* sidebar */
#content .sidebar {
	float: none;
	width: 100%;
	height: auto;
	overflow: auto;
	padding-left: 12%;
	padding-top: 0px;
}
#mobilephonewarn {
	display: none;
}
form.logs {
    margin:0;
}
form.logs fieldset.half, form.logs fieldset.full {
    width:95%;
}
form.logs input, form.logs select, form.logs textarea {
    width:85%;
}
form.logs .left, form.logs .right {
    width:95%;
}
#content .sidebar hr {
	display: none;
}
#menubar .menu h2 {
	display: inline;
	font-size: medium;
	padding-right: 6%;
}
/* Unordered List of links */
#menubar .menu ul {
	display: inline;
}
/*list elements */
#menubar .menu ul li {
	display: inline;
	font-size: medium;
	padding-left: 0%;
	padding-right: 3%;
}	

/*The sidebar and maincontent of page */
#content {
	position: relative;
	top: -22px;
	width: 100%;
	overflow: hidden;
}
/*menu headings in sidebar */
#menubar .menu h2 {
	display: inline;
	font-size: medium;
	padding-right: 6%;
}
/* Unordered List of links */
#menubar .menu ul {
	display: inline;
}
/*list elements */
#menubar .menu ul li {
	display: inline;
	font-size: medium;
	padding-left: 0%;
	padding-right: 3%;
}
/*The link to be hidden in tablet view */
.sidebar #menubar .nav ul .notimp {
	display: none;
}
/* menus in sidebar */
.sidebar #menubar .menu {
	width: 100%;
	text-align: center;
	position: relative;
	top: 16px;
}
.item {
	flex: 1 1 auto;
	margin: auto;
	width: calc(50%);
}
/*menubar in sidebar */
#content .sidebar #menubar {
	position: relative;
	left: -7%;
	overflow: hidden;
	width: 95%;
	padding-top: 0px;
}
/*The sidebar and maincontent of page */
#content {
	position: relative;
	top: -22px;
	width: 100%;
	overflow: hidden;
}
/* main content region of page */
#mainWrapper #content .mainContent {
	overflow: hidden;
	width: 95%;
	margin-top: 40px;
}
#smallWrapper #content .smallContent {
	overflow: hidden;
	width: 99%;
	margin:auto;
	margin-top: 5px;
	text-align: center;
}
/* Content holders in catalog view */
.productRow .productInfo .productContent {
	font-size: 1.1em;
}
/* Buy buttons in catalog view */
.buyButton {
	font-size: 1.1em;
}
/* Container for links in footer */
#mainWrapper footer .footerlinks {
	float: none;
	width: 100%;
	position: relative;
	top: 17px;
	clear: both;
	text-align: center;
	left: 0%;
	padding-bottom: 19px;
}
/* Container for each footer divisions */
#mainWrapper footer div {
	width: 44%;
	text-align: justify;
	font-size: 1.1em;
}
/* Links in header */
header #headerLinks a {
	padding-left: 0px;
	padding-right: 30px;
}
/* Offer- Text banner */
#mainWrapper #offer {
	padding-left: 22%;
}
/* Paragraphs in footer */
footer .footerlinks p {
	display: inline;
}
.box {
	padding: 2%;
	width: 75%;
	margin:10px 0;
}
}

/*media query for small screen devices */
@media screen and (max-width:480px) {
/*Container for links in header */
header {
    display:flex;
    flex-flow:column wrap;
    justify-content: space-between;
}
#headerLinks {
	display:flex;
    flex-flow:column wrap;
    width: 100%;
	text-align: center;
	padding-bottom: 21px;
	font-size: 1.1em;
    
}
/* Logo placeholder*/
#mainWrapper header #logo {
	text-align: center;
}
/* Links in header */
#headerLinks a {
	text-align: center;
	padding-right: 15px;
	padding-left: 0px;
}
/*Offer - Text Banner */
#mainWrapper #offer {
	padding:3%;
	padding-left: 0px;
	text-align: center;
}
#headerLinks a.libre {
	padding: 0;
}
#mainWrapper {
	padding:2px;
	width: calc(100% - 4px);
}
#content .sidebar {
	width: 82%;
}
#content .sidebar #menubar {
	position: relative;
	text-align: center;
	width: 100%;
	padding:0;
	margin:0;
}
#content .sidebar #menubar .menu {
	position: relative;
	text-align: center;
	width: 100%;
}
#content .sidebar #menubar .menu h2 {
	width: calc(100% - 30px);
	text-align: center;
	margin: auto;
	margin-bottom: 10px;
	font-size: 1.6em;
	padding: 10px;
	white-space: normal;
	word-break: keep-all;
	margin-left: 25px;
	display: block;
}
#content .sidebar #menubar .menu ul {
	position: relative;
	padding: 0;
	margin: 0;
	text-align:center;
	left: 0;
}
#content .sidebar #menubar .menu ul li {
	width: 100%;
	display: block;
	white-space: nowrap;
	word-break: keep-all;
	margin: 0;
	border:1px solid var(--p-n);
	left: 0;
	padding:auto;
	margin-bottom:-1px;
}
.showhere {
	left: 20%;
}
form.logs {
    margin:0;
}
form.logs fieldset.half, form.logs fieldset.full {
    width:95%;
}
form.logs input, form.logs select, form.logs textarea {
    width:85%;
}
form.logs .left, form.logs .right {
    width:95%;
}
#mobilephonewarn {
	display: block;
	background-color: var(--s-l);
	color: var(--g-d);
	border:1px solid var(--s-d);
	border-radius: 8px;
	margin:4px;
	padding:12px;
}
.noimpsmall {
	display: none;
}
.item {
	flex: 1 1 auto;
	margin: auto;
	width: calc(100%);
}
.question, .answer {
	width: 88%;
	float:none;
}
.question {
    margin:10px 0px 10px 2px;
    padding:5%;
}
.answer {
    margin:0;
    padding:0;
    width:99%;
}
    
.illustration {
    margin:0px 0px 5px 0px; padding:0; float:none; width:95%;
}
.illustration img {
    border-radius:8px; margin:0; padding:0;
}
.illustration figcaption {
    font-size:0.8em;
}
img.insidetxt {
	min-width:80%;
	width: auto;
	margin: 10px 10%;
	clear:both;
	float: none;
}
input {
	padding: 10px 50px 10px 5px;
	font-size: 1.1em;
}
.quickaccessbtn {
	left: -50px;
	position: relative;
	background-color: var(--s-n);
	color: var(--g-l);
}

#offer #tips {
	width: 100%;
	margin: 0;
	padding: 0;
}
#offer #tips #imgcontainer {
	width: 100%;
	text-align: center;
	padding: 0;
	margin: auto;
}
#offer #tips #imgcontainer img {
	width: 45%;
	margin: auto;
}
#offer #tips #txtcontainer {
	text-align: left;
	width: auto;
	padding: 5% 0 0 5%;
	margin: auto;
}
#offer #tips #txtcontainer h2 {
	text-align: center;
	margin-left:-5%;
}
.dropdown-content { /* le menu qui se déroule */
    width: 100%;
	padding: auto;
}
.productInfo div img {
	max-width: 150px;
	max-height: 150px
}
.productImg { /* in the Basket */
	z-index:6;
	display:block;
	position:relative;
	width:99%;
	text-align:center;
	margin:0px;
	padding:0px;
	left:0;
	top:0;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-clip: border-box;
	background-size: 100%;
}
.productSizeContainer {
	clear:both;
	width:100%;
	vertical-align:middle;
	margin:5px auto;
	padding:auto;
	display:inline-block;
	text-align:center;
}
.productSizeDescr {
	width:80%;
	clear:both;
	padding:auto;
	white-space:nowrap;
	z-index:2;
	margin:5px;
}
.productQtyContainer {
	width:45%;
	padding:auto;
	margin:5px;;
	white-space:nowrap;
	float:left;
	z-index:3;
}
.productPriceSize {
	width:45%;
	padding:auto;
	float:left;
	white-space:nowrap;
	z-index:2;
	margin:5px;
}
/* Each product in catalog view */
.productRow .productInfo {
	width: 100%;
	display: block;
	padding-left: 0px;
	padding-right: 0px;
	position: relative;
	left: -2%;
}
#mainWrapper footer div {
	width: 100%;
	margin-left: -16px;
	text-align: justify;
	padding-bottom: 16px;
	overflow: auto;
}
/* Container for links in footer */
#mainWrapper footer .footerlinks {
	padding-left: 8%;
}
/* Main content which excludes the sidebar */
#mainwrapper #content .mainContent {
	margin-top: -81px;
	text-align: center;
	width: 100%;
	padding-left: 0px;
}
#smallWrapper {
	width:100%;
	margin:0;
	padding:0;
}
#smallWrapper #content .smallContent {
	margin-top: -81px;
	text-align: center;
	width: 100%;
	padding:0;
}
.box, .boxdouble {
	padding: 1%;
	width: 98%;
	margin:10px 0;
}
.boxdouble {
	float:none;
}
}