@font-face {
  font-family: 'Harlow';
  src: url("./webfonts/Harlow_Solid.ttf");
}

/** General **/
* { outline: none; }
body { width:100%; height: 100%; margin:0; padding:0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-style:normal; font-weight:normal; color:#000000; text-align:center; vertical-align:top; background: #bbb; }
img { border: none; }
a{ font-size: 11px; color:#000000; border-style:none; text-align:center; text-decoration:none; cursor:pointer; }
a:hover{ color:#fff; font-size:11px; border-style:none; text-align:center; text-decoration:none; cursor:pointer; }
a:visited{ font-size:11px; color:#666666; border-style:none; text-align:center; text-decoration:none; cursor:pointer; }
a:link{ font-size:11px;	color:#333333;	border-style:none;	text-align:center;	text-decoration:none; cursor:pointer; }

.clear{ clear: both; }

.header{ width:1000px; height:110px; text-align:center; margin:auto; }
.logo{ float:left; width:200px; height:130px; text-align:center; font-family: Times new roman, sans-serif; font-size: 14px; }
.logo h2{ font-size: 26px; margin: 10px 0; }
.menu{ width:500px; height:130px; float:left; text-align:left; }
.form{ margin-top: 50px; width:280px; text-align:left; height:80px; float:left; }
.form p{ margin:0px 10px; height: 25px; line-height:25px; color:#FFF; font-size:14px; float:left; vertical-align:top; }
.form input[type=text]{ width:160px; height:25px; padding:0 7px; background: #3d3d3d; border:0; color:#fff; float:left; }
.form input[type=submit]{ width:25px; height:25px; background:url('../img/theme/front/search.png'); border:0; cursor:pointer; }
.page{  z-index:10; margin:5px auto 10px; width:980px; min-height:800px; padding-bottom:90px; display:block; background:#ffffff url('../img/theme/front/footer_page.png') right bottom no-repeat; text-align:left; padding:10px 20px 10px 0; border-bottom-left-radius:20px; }
.line{ margin:25px auto 0; width:990px; height:20px; display: inline-block; border-bottom: 1px solid #a2c134; font-size:13px; color:#ff9100; background: #fff; text-align:left; padding: 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); }
.deco{ position: absolute; z-index:10; margin:-70px auto; width:1080px; height:150px; }
.contenu{ width:960px; display: inline-block; margin:auto; font-size:12px; padding-bottom:5px; }
.title{ padding-top: 20px; margin-bottom:-40px; text-align:center; font-size: 40px; font-family: Harlow, sans-serif; }
.contact{ position:absolute; z-index: 900; line-height: 20px; font-size: 12px;width:1000px; text-align:center; }
.contact a{ font-size: 12px; color:#000000; border-style:none; text-align:center; text-decoration:none; cursor:pointer; }
.contact a:hover{ color:#555; }

.menu_onglet{ margin-left:10px; width:1000px; height:33px; clear:both; }
.onglet{ margin-left:1px; height:20px; padding:8px 7px 5px 7px; border-top-left-radius:5px; moz-border-radius-topleft:5px; border-top-right-radius:5px; moz-border-radius-topright:5px; background:#5db041; float:left; text-align:center; font-size:8px; }
.cat_search{ width:960px; padding:10px; background:#559a27; color:#ffffff; margin-bottom:5px; border-top-left-radius:5px; moz-border-radius-topleft:5px; border-bottom-right-radius:5px; moz-border-radius-bottomright:5px; }
.list_search{ width:960px; padding:10px; background:#eeeeee; margin-bottom:5px; border-radius:5px; moz-border-radius:5px; }
.list_search img{ float:left; margin-top:15px; margin-right:5px;}
.list{ margin-left:10px; width:960px; padding:10px; background:#eeeeee; margin-bottom:5px; border-radius:5px; moz-border-radius:5px; }
.list img{ float:left; margin-top:15px; margin-right:5px;}
.desc{ float:left; width:450px; text-align:left; margin-right:40px;}
.tarif{ float:left; width:170px; padding-left:10px; text-align:left; cursor: pointer; }
.tarif :hover{ color: #333;}
.tarif a{ font-size: 9px; color: #333; text-decoration: none;}
.ico{ float:left; width:20px; text-align:left; cursor: pointer;}
.ico img{ padding: 10px; cursor: pointer;}
.ico img:hover{ background: #559a27;}
.ref{ float:left; width:100px; padding-left:30px; text-align:left; }
.tarif_titre{ font-weight:bold; }
.presentation{ width:1000px; padding:10px; }
.presentation img{ float:left; margin-right:5px; }
.presentation_texte{ width:600px; min-height:140px; float:left; }
.boutton{ float:right; margin: 50px 10px 0 0; width:100px; font-size:13px; }
.boutton a{ margin:5px 0px; width:100px; line-height:25px; height:25px; display: block; background: #999; cursor:pointer; text-align: center; font-size: 13px; }
.boutton a:hover{ background:#333; }

.display {
	position: relative;
    z-index: 9;
    width: 260px;
    height: 260px;
    line-height: 260px;
    border: 5px solid transparent;
    border-radius: 50px 0px;
    background: linear-gradient(to bottom right, #7e9b22 , #bcde41);
    background-clip: padding-box;
	display: inline-block;
	margin: 100px 0px 0px 40px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
}
.display::after {
	position: absolute;
    width: 250px;
    height: 250px;
    top: 5px; bottom: 5px;
    left: 5px; right: 5px;
    background: linear-gradient(to bottom right, #bcde41 , #7e9b22);
    content: '';
    z-index: -1;
    border-radius: 40px 0px;
	display: inline-block;
}
.display .image {
	margin: 40px auto 10px;
	width: 150px;
	height: 150px;
	border: 1px solid #fff;
	text-align: center;
	vertical-align:middle;
}
.display .image img{
	width: 140px;
	height: 140px;
	margin: 5px auto;
}
.draw{
	padding: 1em 0 0 0;
}
.display button{
	width: 120px;
	height: 50px;
	line-height: 15px;
	margin: 0;
	background: linear-gradient(to bottom, #ffa018, #f59d11);
	border-bottom: 2px solid #df8707;
	color: #fff;
	font-size: 14px;
	padding-top: -10px;
	text-transform: uppercase;
	vertical-align: middle;
	font-weight: semi-bold;
}
.display button:hover{
	background: linear-gradient(to bottom, #df8707, #f59d11);
	border-bottom: 2px solid #ffa018;
	color: #fff;
	font-size: 14px;
	text-transform: uppercase;
	vertical-align: middle;
}

button {
  width : 100px;
  height: 100px;
  line-height: 145px;
  background: none;
  border: 0;
  box-sizing: border-box;
  margin: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  position: relative;
  vertical-align: bottom;
  cursor: pointer;
  text-align:center;
}
button::before, button::after {
  box-sizing: inherit;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}
button.cafe {
  background: url('../img/ico/cafes.png') 50% 30% no-repeat;
}
button.the {
  background: url('../img/ico/thes.png') 50% 30% no-repeat;
}
button.epice {
  background: url('../img/ico/epices.png') 50% 30% no-repeat;
}
button.capsules {
  background: url('../img/ico/capsules.png') 50% 30% no-repeat;
}
.draw {
  -webkit-transition: color 0.20s;
  transition: color 0.20s;
}
.draw::before, .draw::after {
  border: 1px solid transparent;
  border-radius: 0px 10px;
  width: 0;
  height: 0;
}
.draw::before {
  top: 0;
  left: 0;
}
.draw::after {
  bottom: 0;
  right: 0;
}
.draw:hover {
  color: #fff;
}
.draw:hover::before, .draw:hover::after {
  width: 100%;
  height: 100%;
}
.draw:hover::before {
  border-top-color: #fff;
  border-right-color: #fff;
  -webkit-transition: width 0.125s ease-out, height 0.125s ease-out 0.125s;
  transition: width 0.125s ease-out, height 0.125s ease-out 0.125s;
}
.draw:hover::after {
  border-bottom-color: #fff;
  border-left-color: #fff;
  -webkit-transition: border-color 0s ease-out 0.25s, width 0.125s ease-out 0.25s, height 0.125s ease-out 0.375s;
  transition: border-color 0s ease-out 0.25s, width 0.125s ease-out 0.25s, height 0.125s ease-out 0.375s;
}