@charset "UTF-8";

html, body {
	padding: 0;
	margin: 0;
}

html {
	width: 100%;
	height: 100vh;
}

body {
	margin: 0 auto;
	max-width: 2400px;
	
	position: relative;
	width: 100%;
/* 	height: 100%; */
	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #FAFAFA;
	font-family: Helvetica, Arial, Sans-Serif, sansserif, sans;
	font-size: 16px;
}

ul.menu,
ul.footer-links {
	margin: 0;
	padding: 0;
}

a.button {
	display: inline-block;
	text-decoration: none;
	color: inherit;
}

button,
a.button,
input[type='submit'], 
input[type='button'], 
input[type='reset']
	{
	padding: 5px 10px;
	background-color: #e8e8e8;
	color: #000;
	border: 1px solid #929292;
	border-radius: 3px;
	text-align: center;
	font-size: 13px;
}

button:hover, 
button:focus, 
a.button:hover, 
a.button:focus, 
input[type='submit']:hover,
input[type='submit']:focus, 
input[type='button']:hover, 
input[type='button']:focus,
input[type='reset']:hover, 
input[type='reset']:focus {
	background-color: #eee;
	border-color: #999;
}

button:focus, 
a.button:focus, 
input[type='submit']:focus, 
input[type='button']:focus,
input[type='reset']:focus {
	outline: 1px dotted #999;
}

::-moz-focus-inner {
	border: 0;
}

button:active, 
a.button:active, 
input[type='submit']:active, 
input[type='button']:active,
input[type='reset']:active {
	filter: contrast(80%) brightness(95%) grayscale(20%);
	box-shadow: inset -2px 2px 3px 0 rgba(0, 0, 0, .3);
}

.ui-widget-overlay {
	background: black;
	opacity: .5;
}

h1, h2, h3 {
	text-align: center;
}

h1 {
	font-size: 32px;
}

h2 {
	font-size: 24px;
}

h3 {
	font-size: 21px;
}

* > h1:first-child,
* > h2:first-child,
* > h3:first-child {
	margin-top: 0;
}

form.contained {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

.centering {
	width: 80%;
	box-sizing: border-box;
    display: flex;
    flex-flow: column nowrap;
    align-content: center;
    align-items: center;
    justify-content: space-around;
    flex-grow: 1;
    flex-shrink: 1;
}

.centering.flex {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center
}

.validAddress .centering {
	align-items: initial;
}

main {
	flex-grow: 1;
	justify-content: flex-start;
	text-align: justify;
}

main > .centering > article { /* Fix IE11 footer */
	display: flex;
	flex-direction: column;
}

/**
*	Site #header
**/
#header {
	box-sizing: border-box;
}

nav a {
	text-decoration: none;
}

#header, #footer, main, #fixedHeader {
	width: 100%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}

#header .centering {
	margin-bottom: 8px;
	padding: 8px;
	background-color: #BDBDBD;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	box-shadow: 0px 2px 8px #383838;
}

#header h1, #header h2, #header h3, #header h4 {
	margin: 0;
	padding: 0;
}

#header .wrapper, #main-menu, #no-menu-filler {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	width: 100%;
	align-items: center;
}

#header #firstRow h1 {
	text-align: center;
}

#header #banner-container {
    flex: 1 0;
    display: flex;
    flex-flow: column nowrap;
}
#header .kap-link {
    color: #555;
    font-size: 13px;
    align-self: flex-start;
}
#header .kap-link:hover {   
    color: #000;
}
#header .kap-link .site {
	padding-left: 2em;
	background: url("../../webdistributor/img/kn-small.png") no-repeat center left;
	background-size: auto 90%;
}
#header .kap-link:hover .site {
	background-image: url("../../webdistributor/img/kn-small-nb.png");
}

/*--- START --- DEFINE KAP LINK LOCATION --- */
#header .kap-link.banner {
/* 	display: none; */
}
#header .kap-link.slogan {
	display: none;
    padding: .5em;
}
#header .kap-link.between-menu {
	display: none;
    padding: 5px;
    margin-top: 5px;
}
#fixedHeader #fixed-main-menu .kap-link {
	display: none;
}
/*--- END --- */
	

#header #conn-cart {
	width: 172px;
	display: flex;
	flex-flow: column nowrap;
	align-content: stretch;
	order: 3;
}

.logo {
	display: block;
	height: auto;
	margin-right: .5em;
	overflow: hidden;
	color: #d90000;
	text-decoration: none;
	font-weight: bold;
	font-size: 21px;
}

#logo {
	max-width: 30%;
}

.logo img, .logo span {
	display: flex;
	box-sizing: border-box;
	max-width: 100%;
	min-height: 20px;
	max-height: 140px;
	border-radius: 20px;
	background-color: white;
	align-items: center;
	text-align: center;
}

.logo span {
	padding: 10px;
}

.user-box {
    height: 2em;
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    font-size: smaller;
    font-weight: bold;
    background: #96bef1;
    border: 1px solid #fff;
    border-radius: .5em;
   	box-sizing: border-box;
}

#fixedHeader .user-box {
	max-width: 180px;
	width: 180px;
	height: 40px;
}

#header .user-box {
    margin-bottom: .5em;
}

.user-box #logoUser {
    height: 100%;
    text-align: center;
}

.user-box #logoUser {
	width: 2em;
}

#fixedHeader .user-box #logoUser {
	width: 3em;
}

.user-box #accountLogo {
	display: block;
	width: 100%;
	height: 100%;
	background: url("../img/accountLogo.png") no-repeat center;
	background-size: 50%;
}

.user-box div#userInfoHeader {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    flex-shrink: 1;
	overflow: hidden;
	flex: 1rem;
}

.user-box a#account {
    width: 100%;
    text-align: center;
    text-decoration: none;
    color: black;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 .5em;
    white-space: nowrap;
}

.user-box div.userInfoMenu {
	display: none;
/* 	visibility: hidden; */
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	font-weight: normal;
}

.user-box a img#accountLogo {
	height: 100%
}

a.connect {
    text-align: center;
    padding: .5em;
    text-decoration: none;
    font-weight: bold;
    color: black;
}

div#conn-cart a.connect#loginLink {
	display: block;
}

a.connect:hover {
	color: #525252;
}

#header .user-box a#account {
    margin-right: .5em;
    text-decoration: none;
    color: black;
    transition: all .2s ease-out;
}

.user-box a#account:hover {
	text-decoration: underline;
}

div#userInfoMenu {
    padding: .5em;
    position: absolute;
    min-width: 150px;
    z-index: 1000;
    top: 28px;
    right: 0;
    background-color: #96bef1;
    border: 1px solid black;
    border-radius: .2em;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: stretch;
}

.fixed div#userInfoMenu {
    top: 35px;
    max-height: none;
}


div#userInfoMenu a.connect {
    padding: .5em;
    text-decoration: none;
    color: black;
    background-color: #cccccc;
    border: 1px solid #000000;
    border-radius: .5em;
}

div#userInfoMenu a#manage {
   margin-bottom: 10px;
}

div#userInfoMenu a.connect:hover {
	background-color: #e4e2e2;
}


.cart-box {
	height: 4em;
	padding: .5em;
	position: relative;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	font-size: smaller;
	font-weight: bold;
	background: orange;
	border: 1px solid gray;
	border-radius: .5em;
	transition: all .4s ease-out;
	box-sizing: border-box;
}

.cart-box:hover {
	background-color: #ffb836;
	box-shadow: 0px -1px 15px grey;
	border: 1px solid gray;
}

.cart-box #cart-logo {
	width: 3em;
	height: 3em;
	background: url("../img/cart.png") no-repeat center;
	background-size: contain;
}

#fixedHeader .cart-box #cart-logo {
	width: 2.5em;
	height: 2.5em;
}

.cart-box .cartlink {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border-radius: .5em;
}

.cart-box .right-col {
	max-width: 10em;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}

.cart-box .quantity {
	margin-bottom: 5px;
	white-space: nowrap;
}

.cart-box .amount {
	margin-top: 5px;
	white-space: nowrap;
}

#header #site-slogan {
	text-align: center;
	flex: 1 0;
}

#header #site-phone {
	width: 172px;
	text-align: center;
	text-decoration: none;
}

#header #site-phone a {
	text-decoration: none;
	color: inherit;
}

#main-menu-box {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin-bottom: -4px;
	border: 0px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	/* fonctionnel */
	position: relative;
	/* <-- permet de placer le menu par rapport au bouton */
}

#main-menu-box nav a {
	text-transform: uppercase;
}

#main-menu-left,
#main-menu-right {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: flex-start;
	text-overflow: ellipsis;
}

#main-menu-right {
	justify-content: flex-end;
}

/* #main-menu-left li, */
/* #main-menu-right li { */
/* 	display: block; */
/* 	margin: 0 3px; */
/* 	margin-top: 5px; */
/* 	background-color: #585858; */
/* 	color: white; */
/* 	border: 1px solid white; */
/* 	box-shadow: 0px 0 2px 0 white; */
/* 	border-radius: .5em; */
/* 	font-size: 12px; */
/* 	text-align: center; */
/* 	font-weight: bold; */
/* 	transition-duration: 0.1s; */
/* } */

#main-menu-left a,
#main-menu-right a {
	display: block;
	margin: 0 3px;
	margin-top: 5px;
	background-color: #585858;
	color: white;
	border: 1px solid white;
	box-shadow: 0px 0 2px 0 white;
	border-radius: .5em;
	font-size: 12px;
	text-align: center;
	font-weight: bold;
	transition-duration: 0.1s;
	text-decoration: none;
	max-height: 35px;
	padding: 5px 20px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

/* #main-menu-left a, */
/* #main-menu-right a { */
/* 	display: block; */
/* 	color: inherit; */
/* 	text-decoration: none; */
/* 	max-height: 35px; */
/* 	padding: 5px 20px; */
/* 	text-overflow: ellipsis; */
/* 	white-space: nowrap; */
/* 	overflow: hidden; */
/* } */

#main-menu-left a:hover,
#main-menu-right a:hover {
	color: #2f2d2d;
	background-color: #e8e8e8;
	box-shadow: 0px -1px 15px grey;
	border-color: gray;
}

#menu-col {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: flex-start;
}

/** for small screens **/

.small-screen-display {
	display: none;
}

/* Floating menu */

/* en position absolute directement dans le body. Peut servir à d'autres affichages */
#modal-background {
	/* fonctionnel */
	display: none; /* <-- changé en block par la pseudo-classe :target */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	/* non-fonctionnel */
	background: rgba(119, 119, 119, 0.5);
}

#btn-show-menu {
	/* fonctionnel */
	display: none;
	/* non-fonctionnel */
	z-index: 2;
	position: absolute;
	top: -25px;
	right: 0;
	color: black;
	text-decoration: none;
	font-weight: bold;
	background: lightgray;
	border: 1px solid gray;
	border-radius: 3px;
	padding: .2em .5em;
}

#show-menu {
	position: fixed;
	visibility: hidden;
	top: -50px;
	left: -50px;
	width: 0;
	height: 0;
}

/**
*	#footer
**/
#footer {
	margin-top: 1em;
}

#footer .centering.flex {
	flex-flow: row wrap;
	justify-content: space-around;
}

#footer .centering {
	background-color: black;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	padding: 0 .5em;
	box-shadow: 0px 2px 8px #383838;
}

#footer nav,
#footer .footer-links {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}

/* #footer nav a, */
/* #footer .footer-links li { */
/* 	display: block; */
/* 	margin: 3px; */
/* 	color: #eee; */
/* 	text-align: center; */
/* 	white-space: nowrap; */
/* 	border-left: 1px solid black; */
/* 	border-right: 1px solid black; */
/* } */

#footer nav a,
#footer .footer-links a {
	display: block;
	margin: 3px;
	color: #eee;
	text-align: center;
	white-space: nowrap;
	border-left: 1px solid black;
	border-right: 1px solid black;
	min-width: 40px;
	padding: 5px 2em;
}

/* #footer .footer-links a { */
/* 	color: inherit; */
/* 	text-decoration: inherit; */
/* } */

#footer nav a:hover,
#footer .footer-links a:hover {
	border-left-color: white;
	border-right-color: white;
	color: white;
	text-decoration: underline;
}

#footer .footer-links-fix {
	justify-content: space-around;
	flex-grow: 1;
}

#footer .copyright {
	text-align: right;
	color: gray;
	font-style: italic;
	font-size: 12px;
	padding: 5px 1em 0px 1em;
	margin-left: auto;
}

/**
*	Fixed #header
**/
#fixedHeader {
	position: fixed;
	left: 0;
	z-index: 10;
}

#fixedHeader .centering {
	margin: 0 auto;
	display: flex;
	height: 52px;
	padding: 6px;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	background-color: #bdbdbd;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	box-shadow: 0px 2px 6px #383838;
	position: relative;
}

#fixedHeader .centering > * {
	max-height: 40px;
	box-sizing: border-box;
	margin: 0 0 0 .2em;
}

#fixedHeader .centering > first-child {
	margin-left: 0;
}

#btn-s-m {
	color: black;
	text-decoration: none;
	font-weight: bold;
	background: lightgray;
	border: 1px solid gray;
	border-radius: 3px;
	padding: .2em .5em;
	position: relative;
	overflow: visible;
}

#fixedHeader #fixed-main-menu {
	width: auto;
	max-height: none;
	display: flex;
	position: absolute;
	flex-flow: column nowrap;
	top: 100%;
	right: 0;
}

#fixedHeader #main-menu-left,
#fixedHeader #main-menu-right {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	background: #bdbdbd;
	border: 1px solid lightgray;
	box-shadow: 2px 2px 5px 0 black;
	border-radius: 5px;
	min-width: 180px;
	padding: 5px;
	margin: 0;
}

#fixedHeader #main-menu-right {
	margin-top: .2em;
}

#fixedHeader nav a {
	text-transform: uppercase;
}

#fixedHeader .logo {
	font-size: 16px;
}

#fixedHeader .logo img,
#fixedHeader .logo span {
	max-height: 40px;
	min-height: 35px;
	border-radius: 3px;
}

#fixedHeader .logo span {
	padding: 3px;
}

#fixedHeader #fh-cart {
	font-size: 12px;
	padding: 5px;
	height: 40px;
}

#fixedHeader #fh-cart .right-col {
	margin-left: 10px;
}

#fixedHeader #fh-cart .quantity {
	margin-bottom: 0px;
}

#fixedHeader #fh-site-phone a {
	text-decoration: none;
	color: inherit;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/**
*	Cookies banner
**/
.cookies-banner {
	/* positioning */
	position: fixed;
	z-index: 5;
	width: 80%;
	max-width: 70em;
	max-height: 90%;
	margin: 0 auto;
	left: 0;
	right: 0;
	bottom: 2em;
	overflow: auto;
	/* visual style */
	background: white;
	border: 4px solid #57d;
	border-radius: 5px;
	padding: .7em;
	box-shadow: 0 0 0 2px white, 0 0 5px 3px black;
	font-size: 13px;
}

.cookies-banner p {
	margin: 0;
}

.cookies-banner p+* {
	margin-top: .3em;
}

.cookies-banner>p {
	font-weight: bold;
	text-align: center;
}

.cookies-banner .infos {
	margin-top: 1em;
	display: none;
}

.cookies-banner .infos table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #ccc;
}

.cookies-banner .infos td {
	border-left: 1px solid #ccc;
	padding: 1px .3em;
}

.cookies-banner .infos thead {
	white-space: nowrap;
	background: #abf;
}

.cookies-banner .infos tbody tr {
	background: #edf1fc;
}

.cookies-banner .infos tbody tr:nth-child(even) {
	background: #dde4f9;
}

.cookies-banner .infos tfoot {
	background: #eee;
	text-align: center;
	font-style: italic;
	color: #555;
}

.cookies-banner .infos tfoot td {
	padding-top: .2em;
}

.cookies-banner .infos+p {
	margin-top: 1em;
	font-style: italic;
}

.cookies-banner .buttons {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.cookies-banner .buttons button {
	padding: .5em;
	border-radius: .5em;
}

.cookies-banner #accept-all {
	font-weight: bold;
	background: #4a4;
	color: white;
}

.cookies-banner #reject-all {
	background: #dcc;
	color: #555;
}

.cookies-banner #more-info, 
.cookies-banner #less-info {
	background: #57d;
	color: white;
}

.cookies-banner #cookie-choice-confirm {
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	color: #363;
}




/** DIALOGS **/
.no-title .ui-dialog-titlebar {
  display: none;
}

.no-title .ui-dialog-content {
  padding-top: 1em;
  padding-bottom: 1em;
}


/**
* MEDIA 
*/

/* MEDIA 1600px */ 

/* MIN */
@media only screen and (min-device-width : 1600px) , screen and (min-width: 1600px) {
	#main-menu-left a,
	#main-menu-right a {
		min-width: 100px;
	}
}

/* MAX */
@media only screen and (max-device-width : 1600px) , screen and (max-width: 1600px) {
	#main-menu-left a,
	#main-menu-right a {
		min-width: 0;
	}
}

/* MEDIA 1024px */ 

@media only screen and (max-device-width : 1024px) , screen and (max-width: 1024px) {
	.centering {
		width: 100%;
	}
	main .centering {
		padding: 0 1em;
	}
	#fixedHeader {
		width: 100%;
	}
	#header .centering {
		border-radius: 0;
	}
	#footer .centering {
		border-radius: 0;
	}
}

/* MEDIA 768px */ 

@media only screen and (max-device-width : 768px) , screen and (max-width: 768px) {
	
	/* BODY */
	
	main .centering {
		padding: 0 .5em;
	}
	
	/* #header */
	
	#header .centering {
		padding: 5px;
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		height: auto;
	}
	#header .wrapper, #main-menu {
		justify-content: space-around;
	}
	#header .wrapper#firstRow {
		display: flex;
		align-items: center;
	}
	#header #logo {
		margin: 0 2px 2px 5px;
		order: 1;
		min-width: 160px;
	}
	#header #logo img, #header #logo span {
		border-radius: 7px;
		max-height: 100%;
    	min-height: 0%;
	}
	#header #firstRow h1 {
		order: 3;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 21px;
		white-space: normal;
	}
	#header #banner-container {
		flex: 0 0;
	}
	body #header #firstRow .kap-link.banner,
	body #header #secondRow .kap-link.slogan,
	body #header #main-menu-box .kap-link.between-menu {
		display: none;
	}
	#header #secondRow{
		padding: 0.2em;
	}
	#header #secondRow h2 {
		display: none;
	}
	#header #secondRow h3 {
		white-space: nowrap;
	}
	#header #btn-show-menu {
		/* fonctionnel */
		display: block;
/* 		top: -23px; */
	}
	#header #main-menu-box {
		flex-flow: row nowrap;
		max-height: 100%;
		height: 0;
		justify-content: flex-end;
	}
	#header #main-menu {
		width: auto;
		display: flex;
		position: absolute;
		flex-flow: column nowrap;
		top: 0;
		right: .5em;
		align-items: stretch;
	}
	#header #main-menu-left,
	#header #main-menu-right {
		/* fonctionnel */
		display: none; /* <-- changé en flex par la pseudo-classe :target */
		z-index: 3;
		/* non-fonctionnel */
		flex-direction: column;
		align-items: stretch;
		background: #bdbdbd;
		border: 1px solid lightgray;
		box-shadow: 2px 2px 5px 0 black;
		border-radius: 5px;
		min-width: 180px;
		padding: 5px;
		margin: 0;
	}
	
	#header #main-menu-right {
		margin-top: .2em;
	}

	/* Quand #main-menu-left est cible (#) ou a la classe clicked (js), afficher le menu. */
	#show-menu:target+#main-menu>*,
	#show-menu.clicked+#main-menu>* {
		/* fonctionnel */
		display: flex;
		/* <-- afficher le lien de fermeture du menu qui est aussi un fond semi-transparent (ou pas...) */
		opacity: 1;
		height: auto;
	}
	
	#show-menu:target+#main-menu>.kap-link,
	#show-menu.clicked+#main-menu>.kap-link {
		display: none;
	}
	/* FIXED #header */
	
	#fixedHeader #fh-logo {
		display: none;
	}
	#fixedHeader div#userInfoMenu {
		left : 0;
	}
	
}

/* MEDIA 652px */ 

@media only screen and (max-device-width : 625px) , screen and (max-width: 625px) {
	
	/* #header */
	
	#header #logo {
		order: 1;
	}
	
	#header #conn-cart {
		order: 3;
	}
	
	#header #firstRow h1 {
		order: 2;
	}
	
	/* FIXED #header */
	
	#fixedHeader .user-box {
    	width: 50px;
	}
	
	#fh-currUser #logoUser {
		text-align: center;
	}
	
	#fh-currUser img {
		width: 5em;
	}
	
	#fh-currUser div#userInfoHeader {
		display: none;
	}
	
	#fh-currUser #userInfoMenu {
	    width: 190px;
	    padding: 1em;
	    flex-flow: column;
	}
}

/* MEDIA 560px */ 

@media only screen and (max-device-width : 560px) , screen and (max-width: 560px) {
	
	/**
	*  #header .small-screen-display#logo-banner
	*/
	
	#header #logo-banner {
		display: flex;
		min-width: 40%;
		max-width: 50%;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
	}
	
	#header #logo, #header #site-banner {
		display: none;
	}
	
	#header #secondRow {
		justify-content: flex-start;
	}
	
	#header #secondRow .phone#site-phone {
		text-align: left;
		margin-left: 6%;
	}
}

/* MEDIA 450px */ 

@media only screen and (max-device-width : 450px) , screen and (max-width: 450px) {
	#fixedHeader #fh-site-phone {
    	display: none;
	}
}

/* MEDIA 320px */ 

@media only screen and (max-device-width : 320px) , screen and (max-width: 320px) {
	#header .wrapper#firstRow {
		display: flex;
		flex-flow: column;
		align-items: center;
	}
	
	#header #firstRow h1 {
		white-space: nowrap;
	}
	
	#header #logo-banner {
		max-width: none;
	}
}

/** Admin bar bug on small screens */
#minisite #wpadminbar {
	position: fixed;
}