/* CSS Document */

@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500&family=Raleway:wght@400;600&display=swap");

*:focus {
  outline: none !important;
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
  font-family: "Raleway", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #000;
  background-color: #fff;
  text-align: center;
}

img {
  max-width: 100%;
  height: auto;
  border: none;
  vertical-align: bottom;
}
a {
  text-decoration: none;
}

sup.typo_exposants {
  vertical-align: text-top;
  font-size: 0.8em;
}

ul.spip li {
  list-style: disc;
}
.minipanier ul {
	margin: 0;
	padding: 0;
}
.minipanier ul li {
	list-style-type: none;
}

#top {
  position: fixed;
  bottom: 40px;
  right: 0;
  width: 50px;
  height: 50px;
  font-size: 40px;
  background-color: #5483d1;
  color: #fff;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  display: none;
  line-height: 50px;
  cursor: pointer;
  z-index: 1000;
}
#top:hover {
  background-color: #000;
}

hr {
  border: 0;
  color: #e94f35;
  border-color: #e94f35;
  height: 2px;
  margin: 20px 0;
  padding: 0;
}

/* cache-cache ************************/
.t-resp, .loupe, .logo-resp, .bandeau-resp, #menu-wrapper #hamburger-menu, .logo-site-resp, .main-haut-resp, .main-resp {
	display: none;
	visibility: hidden;
	opacity: 0;
}

/* généralités terminées *************/

header {
  position: fixed;
  top: 0;
  display: block;
  width: 100%;
  height: 80px;
  background-color: #fff;
  color: #000;
  z-index: 200;
}
.ariane .titre::after {
  content: " / ";
}
.ariane .titre:last-of-type::after {
  content: "";
}
.bandeau {
  display: inline-block;
  width: 100%;
  max-width: 1180px;
  margin: 6px auto 0;
}
.logo {
	float: left;
	width: 25%;
	margin: 10px 20px 0 0;
  text-align: left!important;
}
/*.logo img {
	width: auto;
}*/
h1 {
  display: none;
	visibility: hidden;
  margin: 0 !important;
}
.recherche {
	float: left;
  text-align: left;
	width: 30%;
	margin: 15px 0 0;
}
.formulaire_recherche {
	display: inline-block;
	width: 100%;
}
.formulaire_recherche input.search {
	width: 70%;
	border: 2px solid #5483d1;
	padding: 5px 10px;
	border-radius: .3em;
	font: 400 1em Arial, Helvetica;
	color: #444;
	background-color: #fff;
	margin-right: 4px;
	text-align: left;
	transition: .2s ease;
}
.formulaire_recherche input.search:focus {
	padding: 5px 20px;
}
.formulaire_recherche input.submit {
	border: none;
	padding: 8px 10px;
	border-radius: .3em;
	font: 600 1em Arial, Helvetica;
	color: #fff;
	background-color: #5483d1;
	transition: .3s ease;
	cursor: pointer;
}
.formulaire_recherche input.submit:hover {
	background-color: #2555a6;
}
.boutik {
	float: right;
  text-align: center;
	width: 40%;
	height: 100%;
}
.bandeau .compte, .bandeau .panier {
	padding-top: 15px;
	color: #5483d1;
	font: 400 .75em Verdana, Helvetica;
	text-transform: uppercase;
}
.compte i, .panier i {
	font-size: 2.5em;
}
.compte a, .panier a {
	color: #5483d1;
	transition: .3s ease;
}
.compte a:hover, .panier a:hover {
	color: #2555a6;
}
.minipanier {
	padding-top: 10px;
	color: #5483d1;
}

main {
  display: inline-block;
  width: 100%;
  margin: 82px auto 60px;
  max-width: 1180px;
  flex: 1;
}
.main-haut, .main-haut-resp {
  display: inline-block;
  width: 100%;
  position: relative;
	/*margin-top: 20px;*/
  z-index: 1;
}
.cycle-slideshow {
  display: inline-block;
  width: 100%;
  margin-bottom: 10px;
}
.cycle-slideshow img {
  display: inline-block;
  width: 100% !important;
}

.contenu {
  display: block;
  width: auto;
  text-align: center;
}
.slogan {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  font: 600 2.5vw "Raleway";
  color: #fff;
  text-shadow: 2px 2px 0 #000;
  z-index: 100;
}
h2 {
  font: normal 1.2em "Raleway";
  margin: 20px 0;
}
a .themes {
  position: relative;
}
a .themes .logo {
  width: 100%;
  height: 100%;
  margin:0;
}
a .themes .logo img {
  width: 100% !important;
  height: auto;
  transition: 0.25s ease-in-out;
  top: 0;
  left: 0;
}
a .themes .logo img.off {
  opacity: 0;
  position: absolute;
}
a .themes .logo img.on {
  opacity: 1;
  position: relative;
}
a:hover .themes .logo img.off {
  opacity: 1;
}
a:hover .themes .logo img.on {
  opacity: 0;
}

a:hover .themes .logo img.on {
  /*transform: scale(1.05);*/
  transform-origin: center;
  transition: 0.25s ease-in-out;
}

/******************************* fin header *********************/

footer {
  margin: auto;
  width: 90%;
  background-color: #e3edfe;
  padding: 20px 5%;
  color: #5483d1;
}
.f-left a {
  color: #2555a6;
  transition: 0.25s ease-in-out;
}
.f-left a:hover {
  color: #5483d1;
}
.f-left {
  text-align: left;
  font: normal 0.85em Verdana;
  line-height: 1.4;
}
.f-right {
  text-align: right;
}
.f-right img {
  width: 100px;
}

.f-central {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.f-central p {
	margin: 1em 0 0;
}
.f-central p:last-of-type {
	margin: .5em 0 0;
}
a.normalink {
	color: #2555a6;
	font-size: .8em;
	font-family: Verdana, Helvetica;
	display: inline-block;
	transition: .25s ease;
}
a:hover.normalink {
	color: #5483d1;
}
.f-central button {
	width: 250px;
	background-color: #E94F35;
	color: #fff;
	font-size: 1.1em;
	text-transform: uppercase;
	padding: 4px;
	margin: 0 auto;
	border-radius: .3em;
	border: none;
	cursor: pointer;
	transition: .3s ease;
}
.f-central button a {
	color: #fff;
}
.f-central button:hover {
	background-color: #2555a6;
}
.f-central button small {
	font-size: .8em;
	text-transform: none;
}

/********************************* intérieur ***************°_°********************************/

h2.rub {
  display: inline-block;
  width: 100%;
  font: normal 1.2em "Raleway";
  margin: 0 0 20px;
  text-align: left !important;
}
h2.rub strong {
  color: #e94f35;
}
h2.rub a {
  color: #e94f35;
  transition: 0.3s ease-in-out;
}
h2.rub a:hover {
  color: #000;
}
h2.rub a.on {
  color: #e94f35;
  border-bottom: 1px solid #e94f35;
}
.content {
  display: inline-block;
  margin: 20px 0;
}
.item-commerce {
  /*display: inline-block;*/
  text-align: center;
  padding: 15px;
  border: 1px solid #e94f35;
  background-color: #fff;
  transition: 0.2s ease-in-out;
}
.item-commerce h4 {
  color: #e94f35;
  transition: 0.3s ease-in-out;
  margin: 12px 0;
  line-height: 1.2;
}
.item-commerce img {
	width: 100%;
  transition: 0.15s ease-in-out;
}
.item-commerce h5 {
  font-family: "Barlow Condensed";
  font-size: 1em;
  font-weight: normal;
  margin: 0 !important;
  text-transform: uppercase;
}
.item-commerce h5 a {
  display: block;
  width: 100%;
  background-color: #5483d1;
  color: #fff;
  padding: 2px 0;
  transition: 0.25s ease-in-out;
}
.item-commerce h5 a:hover {
  background-color: #e94f35;
}
.item-commerce h6 {
  font-size: .9em;
  font-weight: normal;
  margin: 0 !important;
}
.item-commerce:hover {
  border: 1px solid #000;
}
.item-commerce:hover img {
  transform: scale(1.05);
  transform-origin: center;
}
.item-commerce:hover h4 {
  color: #000;
}

.anim, .anim2 {
    width: 100%!important;
    min-width: 100%;
}
.anim img.spip_logo, .anim2 img.spip_logo {
    width: 100%!important;
    min-width: 100%;
}

p.separe {
	margin: .4em 0;
}

.commerce {
  text-align: left;
  font-family: Arial, Helvetica;
}
.infos {
  font-size: 0.9em;
}
.infos h1 {
  font-size: 1.5em;
  font-weight: 600;
  color: #e94f35;
  margin: 0 0 10px;
  line-height: 1.3;
}
.infos img.spip_logo {
  display: inline-block;
  width: 100%;
  margin: 10px 0;
}
.infos p {
  margin: 0 0 1em !important;
}
.infos a {
  color: #e94f35;
  transition: 0.25s ease-in-out;
}
.infos a:hover {
  color: #000;
}
.infos iframe {
  margin-bottom: 10px;
}

span.upper {
	text-transform: uppercase;
}

.articles {
  background-color: #eee;
  padding: 15px;
	text-align: left;
	line-height: 1.4;
}
.articles h2 {
  color: #1C3968 !important;
  font-weight: 600;
  margin-bottom: 0 !important;
}
.articles .txtart a {
	color: #2656A7;
	transition: .25s ease;
}
.articles .txtart a:hover {
	color: #000;
}
.produit {
  background-color: #fff;
  padding: 9px 9px 15px;
  text-align: center;
	border: 1px solid #fff;
	transition: .3s ease-in-out;
}
.produit img {
	width: 100%;
}
.produit h4 {
  font: 500 1.3em "Barlow Condensed";
  color: #000;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0 !important;
}
.produit h4 .chapo {
  display: inline-block;
  color: #5483d1;
  width: 100%;
}
.produit:hover {
	border: 1px solid #1C3968;
}

.articles small {
	color: #E94F35;
}

a button {
  display: inline-block;
  width: 100%;
  background-color: #5483d1;
  color: #fff;
  padding: 5px 0;
  text-align: center;
  border: none;
  border-radius: 0.2em;
  cursor: pointer;
  transition: 0.25s ease-in-out;
}
a:hover button {
  background-color: #e94f35;
}

.promo {
  display: inline-block;
  width: 100%;
  background-color: #ce89a9;
  margin-top: 15px;
  padding: 10px 0;
  text-align: center;
  color: #fff;
  font: 500 2em "Barlow Condensed";
}

.plan {
  width: 100%;
  margin: 20px 0;
}

.txt-fiche {
	display: inline-block;
  margin-top: 2em;
	border-top: 1px dotted #444;
	padding-top: 1em;
}
.txt-fiche p {
  margin: 0 0 1em 0 !important;
}
.txt-fiche a {
  color: #5483d1;
  transition: 0.25s ease-in-out;
}
.txt-fiche a:hover,
.txt-fiche a:hover i {
  color: #000;
}
.txt-fiche a i {
  font-size: 32px;
  color: #5483d1;
  margin: 0 10px 0 0;
  transition: 0.25s ease-in-out;
}

/******************** recherche par mot-clé ***************************************/
.mot-theme a {
	display: inline-block;
	background-color: #5483d1;
	padding: 4px 8px;
	font: 400 1.2em 'Barlow Condensed';
	text-transform: uppercase;
	color: #fff!important;
	margin: 0 10px 10px 0;
	border-radius: .2em;
	transition: .3s ease;
}
.mot-theme a:hover {
	background-color: #2555A6;
}

/*************************************DATEPICKER***********************************/
.ui-datepicker a.ui-state-default,.ui-datepicker .ui-state-disabled span.ui-state-default{
	padding:8px;
	display:block;
	border:none;
	text-align:center;
}
.ui-datepicker .ui-datepicker-days-cell-over a,.ui-datepicker  a.ui-state-active{
	background-color: yellow;
	color:black;
}
.ui-datepicker a.ui-state-hover{
	background-color: cyan;
}

/*********************************************************************** */

/************************************* for me, for me, Formidable ! *********************************/
.formulaire_formidable label {
	display: block;
	width: 100%;
	margin: 0 0 .25em 0;
	font-size: 1.2em;
	font-weight: normal;
	color: #2555A6;
}
.formulaire_formidable input.text, .formulaire_formidable textarea {
	background-color: rgba(255,255,255,0.5);
	padding: 6px 10px;
	width: 80%;
	font-size: 1em;
	color: #000;
	transition: .25s ease;
	border: 1px solid #2555A6;
	border-radius: .25em;
}
.formulaire_formidable input.text:focus, .formulaire_formidable textarea:focus {
	background-color: #fff;
}
span.obligatoire {
	color: #E94F35;
	font-weight: 600;
}
.formulaire_formidable fieldset {
	background-color: rgba(255,255,255,0.5);
	padding: 10px;
	width: 80%;
}
.formulaire_formidable fieldset legend span {
	font-size: 1.2em;
	font-weight: bold;
	color: #2555A6;
}
.formulaire_formidable .choix {
	display: block;
}
.formulaire_formidable .choix input.checkbox {
	display: inline-block;
	margin-right: 10px;
	background-color: rgba(255,255,255,0.5);
	padding: 6px;
	width: auto;
	transition: .25s ease;
	border: 1px solid #2555A6;
}
.formulaire_formidable .choix label {
	display: inline-block;
}
.formulaire_formidable button.submit {
	float: left;
	font-size: 1.6em;
	font-weight: 500;
	color: #fff;
	background-color: #2555A6;
	padding: 8px 15px;
	margin-right: 20px;
	border: none;
	border-radius: .25em;
	cursor: pointer;
	transition: .25s ease;
}
.formulaire_formidable button.submit:hover {
	background-color: #E94F35;
}
/********************************************************************/
a .pdf {
  background-color: #fff;
  padding: 10px;
  text-align: center;
	margin: 20px 0 0 0;
}
a .pdf i {
  font-size: 3em;
	color: #2555A6;
	transition: .3s ease-in-out;
}
a:hover .pdf i {
	color: #444;
}
a .pdf h5 {
	font: 400 .8em Verdana, Helvetica;
	color: #444;
	margin: 5px 0 0 0;
	transition: .25s ease;
}
a:hover .pdf h5 {
	color: #2555A6;
}

/************************** formulaire mon compte *********************************************/
.formulaire_login fieldset, .formulaire_inscription fieldset, .formulaire_profil fieldset {
	background-color: #ddd;
	padding: 1em;
	border: none;
	text-align: left;
}
.formulaire_login fieldset legend, .formulaire_inscription fieldset legend, .formulaire_profil fieldset legend {
	font: 600 1.4em 'Raleway';
	color: #2555A6;
	background-color: #ddd;
	padding: 5px 10px;
	border-radius: .25em;
}
.formulaire_login input.text, .formulaire_inscription input.text, .formulaire_profil input.text {
	padding: 5px 10px;
	background-color: rgba(255,255,255,0.5);
	border: 2px solid #2555A6;
	border-radius: .25em;
	transition: .25s ease-in-out;
}
.formulaire_login input.text:hover, .formulaire_inscription input.text:hover, .formulaire_login input.text:focus, .formulaire_inscription input.text:focus, .formulaire_profil input.text:hover, .formulaire_profil input.text:focus {
	background-color: #fff;
	border: 1px solid #000;
}
p.details a {
	color: #444;
	transition: .25s ease;
}
p.details a:hover {
	color: #000;
}
.formulaire_login input.submit, .formulaire_inscription input.submit, .formulaire_profil input.submit {
	font-size: 1.6em;
	font-weight: 500;
	color: #fff;
	background-color: #2555A6;
	padding: 8px 15px;
	/*margin-right: 20px;*/
	border: none;
	border-radius: .25em;
	cursor: pointer;
	transition: .25s ease;
}
.formulaire_login input.submit:hover, .formulaire_inscription input.submit:hover, .ajouter_au_panier button.submit:hover, .formulaire_profil input.submit:hover {
	background-color: #E94F35;
}

/* bandeau des actus **************/

.cycle-slideshow {
    animation-duration: .8s;
}
.cycle-slideshow img {
    width: 100%!important;
}
.cycle-slideshow .titre-une-home {
	position: absolute;
	display: inline-block;
	top: 0;
    left: 0;
	width: auto;
	background: linear-gradient(#fff,rgba(255,255,255,0.7));
	padding: 5px 20px;
	/*overflow: hidden;*/
	z-index: 1000;
    animation-delay: 1s;
	transition: all .4s ease;
}
.cycle-slideshow .titre-une-home span.titre-big-home {
	font: 400 2.5em 'Barlow Condensed';
	color: #2555A6;
	display: block;
	overflow: hidden;
    line-height: 1.3;
	margin-bottom: 0;
}
.cycle-slideshow .titre-une-home span.titre-small-home {
	font: 400 1.2em Arial, Helvetica;
	color: #000;
	display: block;
	overflow: hidden;
	text-transform: none;
}
.cycle-slideshow:hover .titre-une-home {
	background-color: #fff;
}

.cycle-prev {
    position: absolute;
    top: 50%;
    left: 40px;
    transform: translateY(-50%);
    font-size: 2.5em;
    opacity: .7;
    color: #E94F35;
    cursor: pointer;
    z-index: 500;
    animation-delay: 2.5s;
    -webkit-transition: all .3s ease;
	transition: all .3s ease;
}
.cycle-next {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    font-size: 2.5em;
    opacity: .7;
    color: #E94F35;
    cursor: pointer;
    z-index: 500;
    animation-delay: 2.5s;
    -webkit-transition: all .3s ease;
	transition: all .3s ease;
}
.cycle-prev:hover, .cycle-next:hover {
    opacity: 1;
}

@media (max-width: 1024px) {
	
	.cycle-slideshow .titre-une-home {
		width: 40%;
	}
	.cycle-slideshow .titre-une-home span.titre-big-home {
		font: 400 2.2vw 'Barlow Condensed';
		margin-bottom: 10px;
		line-height: 1.15;
	}
	.cycle-slideshow .titre-une-home span.titre-small-home {
		font: 400 1.5vw Arial, Helvetica;
	}
	.cycle-slideshow .titre-une-home p.plus {
    	font: 600 1.5vw Arial;
	}
	
}

@media (max-width: 810px) {
	
	.cycle-slideshow {
		margin-top: 20px;
	}
	.cycle-slideshow .titre-une-home {
		left: 10%;
	}
	
	.cycle-prev {
		left: 20px;
	}
	.cycle-next {
		right: 20px;
	}
	
}

@media (max-width: 700px) {
	
	.cycle-slideshow .titre-une-home {
		width: 60%;
		left: 15%;
	}
	.cycle-slideshow .titre-une-home span.titre-big-home {
		font: 400 2.4vw 'Barlow Condensed';
		margin-bottom: 0!important;
		line-height: 1.2;
	}
	.cycle-slideshow .titre-une-home span.titre-small-home {
		font: 400 2.4vw Arial, Helvetica;
	}
	.cycle-slideshow .titre-une-home p.plus {
    	font: 600 2vw Arial;
	}
	.cycle-prev, .cycle-next {
		font-size: 2.5em;
	}

}

@media (max-width: 540px) {
    
    .main-haut, .cycle-prev, .cycle-next {
        display: none;
        visibility: hidden;
        opacity: 0;
    }
    .main-resp {
        display: block;
        visibility: visible;
        opacity: 1;
    }
    .cycle-slideshow .titre-une-home span.titre-big-home {
		font: 400 4vw 'Barlow Condensed';
		line-height: 1.2;
	}
	.cycle-slideshow .titre-une-home span.titre-small-home {
		font: 400 3vw Arial, Helvetica;
	}
    
}

/* articles achat ******************************************************/

.ajouter_au_panier {
	display: inline-block;
	width: 100%;
	margin: 20px 0;
}
.ajouter_au_panier label {
	font: 400 1.2em 'Barlow Condensed';
	color: #2555A6;
}
.ajouter_au_panier label strong {
	font-weight: 500;
}
#prd_quantite, #prd_prix, #prd_prix_total {
	display: inline-block;
	width: 100%;
	margin: 0 0 1em 0;
}
#prd_quantite input, #prd_prix input, #prd_prix_total input {
	border: 2px solid #2555A6;
	background-color: #E3EDFE;
	padding: 4px 0 4px 10px;
	margin-left: 5px;
	color: #000;
	border-radius: .25em;
}
.ajouter_au_panier button.submit {
	font-size: 1.2em;
	font-weight: 500;
	color: #fff;
	background-color: #2555A6;
	padding: 8px 15px;
	margin: 20px 0 0 0;
	border: none;
	border-radius: .25em;
	cursor: pointer;
	transition: .25s ease;
}

.logo-article {
	float: right;
	width: 35%;
	margin: 0 0 20px 20px;
}
.logo-article img {
	width: 100%;
}

.formulaire_panier table tr {
	padding: 10px;
	background-color: #E3EDFE;
}
.formulaire_panier table tr th {
	color: #2555A6;
}
.formulaire_panier button {
	font-size: 1.2em;
	font-weight: 500;
	color: #2555A6;
	padding: 6px;
	margin: 20px 0 0 0;
	border: none;
	border-radius: .25em;
	cursor: pointer;
	transition: .25s ease;
}
.formulaire_panier button:hover {
	color: #000;
}
.articles a.bouton-achat {
	font-size: 1.2em;
	font-weight: 500;
	color: #fff;
	background-color: #2555A6;
	padding: 8px 15px;
	margin: 20px 0 0 0;
	border: none;
	border-radius: .25em;
	transition: .25s ease;
}
.articles a:hover.bouton-achat {
	background-color: #000;
}

span.montant {
    display: inline-block;
    margin-top: 5px;
    background-color: #e94f35;
    padding: 4px 8px;
    color: #fff;
    font-weight: 500;
    border-radius: .25em;
}

.big {
    font-size: 1.4em;
}
.big a, a.spip_out {
    color: #2555A6;
    transition: .25s ease;
}
.big a:hover, a:hover.spip_out {
    color: #000;
}

.emplette .description a {
	color: #e94f35;
	font-size: 1.15em;
	font-weight: bold;
	line-height: 1.5;
	transition: .25s ease;
}
.emplette .description a:hover {
	color: #000;
}

/************************************************************************* °_° **********************************************/

@media (max-width: 1220px) {
  .bandeau,
  .contenu {
    display: block;
    width: auto;
    padding: 0 40px;
  }
}

@media (max-width: 820px) {
	.bandeau {
    	padding: 0 20px;
	}
	.recherche {
		display: none;
		visibility: hidden;
		opacity: 0;
	}
	.logo {
		width: 35%;
	}
	.loupe {
		display: block;
		visibility: visible;
		opacity: 1;
		float: left;
		width: 20%;
		color: #5483d1;
		font: 400 .75em Verdana, Helvetica;
		text-transform: uppercase;
		text-align: center;
		margin-top: 15px;
	}
	.loupe i {
		font-size: 2.5em;
	}
	.loupe a {
		color: #5483d1;
		transition: .3s ease;
	}
	.loupe a:hover {
		color: #2555a6;
	}
  .slogan {
    font: 600 3.2vw "Raleway";
  }
}

@media (max-width: 780px) {
	
	.f-left, .f-right {
		display: inline-block;
		width: 100%;
	  text-align: center;
		margin: 0 0 15px;
	}

	.f-central {
		display: inline-block;
		margin: 0 0 15px;
	}
	
}

@media (max-width: 690px) {
	
	#menu-wrapper #hamburger-menu {
		display: block;
		opacity: 1;
		visibility: visible;
		z-index: 9000;
	}
	.logo-site-resp {
		display: inline-block;
		visibility: visible;
		opacity: 1;
		width: 100%;
		margin: 20px 0 10px;
		text-align: left;
	}
	.logo-site-resp img {
		width: 80%;
		float: left;
	}
	.logo-top, .bandeau {
		display: none;
		visibility: hidden;
		opacity: 0;
	}
	.bandeau-resp {
		display: block;
		visibility: visible;
		opacity: 1;
		width: auto;
		margin: 15px auto 0;
		text-align: center;
		padding: 0 20px;
	}
	.bandeau-resp .loupe {
		float: none;
		width: 20%;
		margin: 0 1.5%;
		display: inline-block;
		font: 500 .9em "Barlow Condensed";
	}
	.bandeau-resp .compte, .bandeau-resp .panier {
		width: 22%;
		display: inline-block;
		font: 500 .9em "Barlow Condensed";
	}
	.bandeau-resp .minipanier, .ajax-id-minipanier {
		width: 20%;
		margin: 0 1.5%;
		display: inline-block;
		font: 500 .9em "Barlow Condensed";
	}
	.logo-resp {
		display: inline-block;
		visibility: visible;
		opacity: 1;
		width: 70%;
		margin: 0 15%;
	}
	.produit, .item-commerce {
		margin-bottom: 15px;
	}
	.item-commerce h4 {
	  font-size: 1.4em;
	}
	.item-commerce h5 {
	  font-size: 1.3em;
	}
	.item-commerce h5 a {
	  padding: 5px 0;
	}
}

@media (max-width: 580px) {
	
	
	.boutik {
		width: 75%;
	}
	
	.plan {
		width: 100%;
		margin: 10px 0;
	}
	
	.themes {
		display: none;
		visibility: hidden;
		opacity: 0;
	}
	.slogan {
	  font: 600 4.5vw "Raleway";
	}

	.t-resp {
		display: inline-block;
		visibility: visible;
		opacity: 1;
		width: 100%;
		text-align: center;
		font: 600 1.2em 'Raleway';
	}
	.t-resp a {
		color: #fff;
		display: block;
		width: 100%;
		background-color: #2555A6;
		padding: 5px 0;
		margin: 0 0 10px;
		transition: .25s ease;
	}
	.t-resp a:hover {
		background-color: #E94F35;
	}
	
	.logo-article {
		float: none;
		width: 100%;
		margin: 0 0 20px 0;
	}
	
}