@charset "utf-8";
/* CSS Document */
a { outline:none; cursor:pointer; text-decoration:none; color:#e30613;}
a:hover { text-decoration:underline;}
body { margin:0 auto; font-family:"Roboto Condensed", Arial, Helvetica, sans-serif; font-weight:300; color:#444; background:#E50612; color:rgba(0,0,0,0.8); font-size:16px; line-height:135%;}

body.collector { background-color: #009fe8;}

#cover404 { position:absolute; top:0; left:0; width:100%; height:100%; background:#EBFBFF url(../images/city.png) repeat-x center bottom; background-size:cover;}

#erreur404 { position:absolute; width:90%; left:5%; top:50%; margin:-160px 0 0 0; text-align:center;}
#erreur404 h1 { font-size:38px; color:#666; color:rgba(0,0,0,0.5); margin-bottom:30px;}
#erreur404 h1 strong { font-size:76px; margin-top:8px; display:block;}
#erreur404 p { margin:10px 0; font-weight:400; color:rgba(0,0,0,0.8);text-shadow:0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF;}
#erreur404 p a {  font-family:"Boogaloo", Arial, Helvetica, sans-serif; font-weight:400; font-size:20px; text-shadow:none;}
.al-r { text-align:right;}
.small { font-size:90%;}

.read-more { font-family:"Boogaloo", Arial, Helvetica, sans-serif; }

textarea , input, select {   font-family:"Roboto Condensed", Arial, Helvetica, sans-serif; font-size:14px;  font-weight:300; color:#333; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box;    /* Firefox, other Gecko */    box-sizing: border-box; ms-box-sizing: border-box; resize: none; outline:none;}

p.buttons a { display:inline-block; padding:7px 10px 8px 28px; line-height:20px; font-size:19px; color:#FFF; background:#EC1D25 url(../images/bg-button.png) no-repeat 0 center; border-radius:3px; font-family:"Boogaloo", Arial, Helvetica, sans-serif; font-weight:400; text-decoration:none; transition:background-color 0.15s, color 0.15s; border:1px solid rgba(0,0,0,0.2) }
p.buttons a:hover { text-decoration:none; background-color:#222;}

.grey, a.grey { color:#666;}

p.buttons.small a { padding:7px 10px 8px 28px; line-height:16px; font-size:16px; }

#menu { background:#E50612; padding:50px 20px 40px 20px; height:80px; overflow:hidden; border-bottom:1px solid rgba(0,0,0,0.2);}
.collector #menu { background-color: #009fe8;}




#menuAnnexe { position:absolute; bottom:45px; right:2px; width:260px; text-align:right; }
#menuAnnexe a { display:inline-block; height:22px; line-height:22px; font-size:13px; text-transform:uppercase; color:#FFF;font-family:"Boogaloo", Arial, Helvetica, sans-serif; font-weight:400; /*text-shadow:
   -1px -1px 0 #17a6d7,  1px -1px 0 #17a6d7, -1px 1px 0 #17a6d7,  1px 1px 0 #17a6d7 , 0 0 3px #17a6d7 , 0 0 2px #17a6d7 , 0 0 2px #17a6d7 , 0 0 2px #17a6d7 , 0 0 2px #17a6d7 , 0 0 2px #17a6d7;*/ overflow:hidden; padding:0 0 0 18px; background:no-repeat 0 center;}
#menuAnnexe a.presse { background-image:url(../images/menu/presse.png)}
#menuAnnexe a.pdv { background-image:url(../images/menu/pin.png)}


#menuAnnexe span {  display:inline-block;  height:22px; line-height:18px; font-size:14px; text-transform:uppercase; color:#FFF; margin:0 2px; font-family:"Boogaloo", Arial, Helvetica, sans-serif; font-weight:400;  padding:0; overflow:hidden;}



.center { margin:0 auto; max-width:1120px;}
.center.small { max-width:800px;}
#menu #logo { width:80px; height:80px; background:url(../images/logo.png) no-repeat center center; background-size:cover; position:absolute; left:0;}

#menu #logo-collector { width:80px; z-index: 5; height:80px; background:url(../images/logo-collector.png) no-repeat center center; background-size:cover; position:absolute; left:290px;}


h1, h2, h3, h4, h5 { font-family:"Boogaloo", Arial, Helvetica, sans-serif; font-weight:400; text-transform:uppercase;  line-height:110%; color:#17A6D7;text-shadow:0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF; }
h1 { font-size:28px; margin:15px 0 20px 0;}
h2 { font-size:20px; margin:20px 0 20px 0;}
h3 { font-size:18px; margin:15px 0;}
h4 { font-size:16px; margin:15px 0;}

#menu .wrap { position:relative; padding:0 0 0 100px;}
#menuRight { position:absolute; right:0; height:80px; width:220px;}
#menuRight form { position:absolute; width:100%; height:34px; bottom:5px;}
#menuRight form  a { position:absolute; right:2px; top:2px; width:30px; height:30px; border-radius:100%; background:#555 url(../images/pictos/search.png) no-repeat center center; background-size:cover; z-index:2; box-shadow:0 0 0 1px rgba(0,0,0,0.4) inset; transition:background-color 0.1s, transform 0.1s, box-shadow 0.1s;}
#menuRight form  a:hover { background-color:#17a6d7; transform:scale(1.4,1.4); box-shadow:0 0 0 1px rgba(0,0,0,0.4) inset, 0 0 6px 1px rgba(0,0,0,0.5);}
#menuRight input { position:absolute; width:100%; height:34px; width:100%; border:0; margin:0; padding:0 40px 0 10px; border-radius:30px; background:#FFF;  }
#menuRight input:focus {  box-shadow:0 0 4px 1px rgba(0,0,0,0.25) inset;}

.clear { clear:both;}

#menu ul { margin:0 160px 0 0; padding:0; list-style:none;}
#menu ul li { float:left; margin:0; padding:0; width:120px;  position:relative;}
#menu ul li.legende { position: absolute; background: rgba(0,0,0,0.2); width:210px; text-align: center; height: 28px; border-radius: 0 0 8px 8px; line-height: 26px; padding: 0;  white-space: nowrap;  font-size: 90%; color: #FFF; left: 0; top: 0; margin: -50px -10px; font-weight: 500; opacity: 0.8;}
#menu ul li.legende.grand { left: 290px;}
#menu ul li.border { margin-right:22px; padding-right:22px;}
#menu ul li.margin { margin-left: 116px } 
#menu ul li.border:before , #menu ul li.border:after { content:""; position:absolute; height:100%; padding: 20px 0 ; margin: -30px 0 0 0; top:0; width:1px; right:0; background:rgba(255,255,255,0.5);}
#menu ul li.border:after { right:1px; background:rgba(0,0,0,0.25);}

#menu ul li a { display:block; margin:0;  height:80px; background:no-repeat center 0; background-size:auto 70px; font-family:"Boogaloo", Arial, Helvetica, sans-serif; text-transform:uppercase; color:#FFF; text-align:center; white-space:nowrap;/* text-shadow:
   -1px -1px 0 #17a6d7,  1px -1px 0 #17a6d7, -1px 1px 0 #17a6d7,  1px 1px 0 #17a6d7 , 0 0 3px #17a6d7 , 0 0 3px #17a6d7 , 0 0 3px #17a6d7 , 0 0 3px #17a6d7 , 0 0 3px #17a6d7 , 0 0 3px #17a6d7 , 0 0 3px #17a6d7 , 0 0 3px #17a6d7 , 0 0 3px #17a6d7 , 0 0 3px #17a6d7 , 0 0 3px #17a6d7;*/ opacity:0.75; transition:opacity 0.2s; backface-visibility:hidden; position:relative;  line-height:0; text-decoration:none; font-size:0; background-size:contain; height:88px; }
  
  #menu ul li a strong { display:block;font-size:25px; font-weight:bold; line-height:26px; font-size:0; } 
  #menu ul li a em { display:block; font-style:normal;font-size:15px; font-weight:bold; line-height:18px; font-size:0; } 
#menu ul li a .first { padding-top:40px;}

#menu ul li a:hover , #menu ul li a.actif {opacity:1;}   
/*#menu ul li a.actif { transform:scale(1.25,1.25); z-index:2; color:#17a6d7; text-shadow:
   -1px -1px 0 #FFF,  1px -1px 0 #FFF, -1px 1px 0 #FFF,  1px 1px 0 #FFF , 0 0 3px #FFF , 0 0 3px #FFF , 0 0 3px #FFF , 0 0 3px #FFF , 0 0 3px #FFF , 0 0 3px #FFF , 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF , 0 0 3px #FFF , 0 0 3px #FFF , 0 0 3px #FFF , 0 0 3px #FFF , 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF;}   */
   
  

#menu ul li a.collector { background-image:url(../images/pictos/menu-collector.png?v=3);}
#menu ul li a.produits { background-image:url(../images/pictos/menu-gammes.png?v=3);}
#menu ul li a.jeux { background-image:url(../images/menu/jeux.png?v=3);}
#menu ul li a.histoire { background-image:url(../images/pictos/menu-a-propos.png?v=3);}
#menu ul li a.news { background-image:url(../images/menu/news.png?v=3);}

#menu ul li a span { display:inline-block; margin:0 .15em 0 0; }
#menu ul li a strong span {  margin:0 .1em 0 0; }
#menu ul li a span:nth-child(1n) { transform:rotate(4deg) translate(0,-2px); }
#menu ul li a span:nth-child(2n) { transform:rotate(-4deg) translate(0,0);  }

.title { font-family:"Boogaloo", Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:15px; line-height:20px; font-weight:normal; padding:8px 0 6px 60px ; color:#17a6d7; background:no-repeat 0 center url(../images/pictos/title.png); background-size:contain; margin:15px 0;  position:relative; }
.title.tv { background-image:url(../images/pictos/title-tv.png);}
.title.youtube { background-image:url(../images/pictos/title-youtube.png);}

/*.title.toy { background-image:url(../images/pictos/title-toy.png);}
.title.jeux { background-image:url(../images/pictos/title-jeux.png);}
.title.pdv { background-image:url(../images/pictos/title-pdv.png);}*/


.title.search { background-image:url(../images/pictos/title-search.png);}



.title strong { display:block; font-style:normal; font-size:26px; font-weight:normal;}
.title.noPic { padding:0; margin:0; background-image:none;}

.title a.more { position:absolute; right:0; bottom:3px; font-size:13px; color:#333; color:rgba(0,0,0,0.8); line-height:15px;}

#slideShow { height:200px; padding:5% 0; background:#EEE; position:relative; overflow:hidden;}

#slideShow .slide { position:absolute; height:100%; background:no-repeat center center; background-size:contain; top:0; left:0; width:100%;  z-index:1;  transform:scale(1.3,1.3); transition:transform 0.3s;}


#slideShow .slide.actif {  z-index:2; transform:scale(1,1)}
#slideShow .slide a { position:absolute; left:0; top:0; height:100%; width:100%;}
#slideShow .nav { position:absolute; z-index:4; width:100%; bottom:20px; text-align:center;}
#slideShow .nav a { background:#FFF; background:rgba(255,255,255,0.7); display:inline-block; margin:0 5px; width:14px; height:14px;  border-radius:100%; box-shadow:0 0 5px rgba(0,0,0,0.2); font-size:0;}

.collector #slideShow .nav a.actif {background-color: #009fe8;}

#slideShow .nav a.actif { background:#E50612; }
#slideShow a.navLink { position:absolute; top:0; height:100%; width:20%; max-width:350px; min-width:80px; z-index:5; opacity:0.3; transition:opacity 0.2s, background-size 0.12s, background-color 0.2s; background:no-repeat center center; background-size:50px; font-size:0;}
#slideShow a.navLink svg { width:52px; height:52px; -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg); position:absolute; top:50%; left:50%; margin:-26px; transition:transform 0.12s;}
#slideShow a.navLink:hover svg { transform:rotate(-90deg) scale(1.25,1.25);}
#slideShow a.navLink svg .circle_animation {
  stroke-dasharray: 140; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 140;
}	
	
#slideShow a.navLink:hover { opacity:1; background-color:rgba(0,0,0,0.06); background-size:64px;}
#slideShow a.navLink.prev { left:0; background-image:url(../images/pictos/prev.png);}
#slideShow a.navLink.next { right:0; background-image:url(../images/pictos/next.png);}
#slideShow .timer { position:absolute; z-index:3; height:3px; left:4px; right:4px; bottom:4px; background:rgba(0,0,0,0.2); z-index:3;}
#timerSlideShow { background:#FFF; height:100%; width:0;}

#city { padding:20px 20px 40px 20px; background:#EBFAFF url(../uploads/bg-homepage.jpg) repeat-x center bottom; background-size:cover;}

.col-50 { float:left; width:50%; position:relative;}

.marge-right { margin-right:15px;}
.marge-left { margin-left:15px;}

.box { padding:17px; background:#FFF; box-shadow:0 0 12px 2px rgba(0,0,0,0.15); border-radius:6px; margin:20px 0; position:relative;}


#videoBox { height:48px; position:relative; background:#000; padding:23.5% 0;}
#videoBox iframe { position:absolute; width:100%; height:100%; left:0; top:0; }
#newsBox h3 { margin:0; font-weight:400;  font-size:14px; color:#333;}
#newsBox .picture { display:block; width:100%; height:auto; margin:10px 0;}
#newsBox p { text-align:right; margin:0;}
#mainSharing { position:absolute; right:0; width:39%;}
#mainSharing div.share { padding-left:25px; margin-bottom:15px;}

#newsBox a { display:block; color:#000; text-decoration:none !important; padding:0.5em 0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#newsBox a:hover { background-color:#FAFBFC;}
#newsBox a strong { display:block; color:#AAA; font-size:80%; line-height:110%; margin:0.2em 0 .2em 0;}
#newsBox a + a { border-top:1px solid #F5F5F5;}

hr { margin:20px 0; height:0; border:none; border-top:1px solid #AAA; border-bottom:1px solid #FFF; border-top-color:rgba(0,0,0,0.12); border-bottom-color:rgba(255,255,255,0.95);}

/*#whoAreYou { padding:0 39% 0 0; background:url(../images/mascotte.jpg) no-repeat right bottom; position:relative;}
#whoAreYou p { margin:0; padding:1px 0; font-weight:400; color:rgba(0,0,0,0.7);  font-family:"Boogaloo", Arial, Helvetica, sans-serif; font-size:18px;  line-height:115%;}
#whoAreYou form { background:#EBFAFF; padding:15px; margin:15px 0 0 0; border:1px solid rgba(0,0,0,0.05); border-radius:6px;}
#whoAreYou select { display:block; padding:5px; margin:5px 0; }
#whoAreYou hr { margin:10px 0;}
#whoAreYou p.buttons { margin:15px 0 0 0;}
#webzineBox img.webzine { border-radius:6px; box-shadow:0 0 5px rgba(0,0,0,0.2); width:39%; margin:0 0 0 0; max-width:220px; height:auto; border:none; float:left;}
#webzineBox { position:relative; margin:15px 0 5px 0;}
#webzineBox ul { float:right; width:61%; list-style:none; margin:0; padding:0;}
#webzineBox ul li {  margin:0 0 0 15px;  overflow:hidden; padding:10px;  background:#17a6d7;text-align:right; border-radius:6px; }
#webzineBox ul li a { color:#FFF; }
#webzineBox ul li a img { width:100%; height:auto; margin-bottom:8px;}*/


#slideProduits { padding:25px 20px;}

#slideProduits .title { margin-right:60px;}
.slideProducts .nav a { position:absolute; margin:0 -65px; background:no-repeat center center; height:100%; width:80px; transition:opacity 0.2s, background-size 0.12s, background-color 0.2s; background-size:38px; font-size:0;z-index:5; opacity:0.6;}
.slideProducts .nav a:hover { opacity:1;  background-size:56px;}

.slideProducts .slideWrap { position:absolute; width:100%; top:0; left:0; height:100%; overflow:hidden; padding:5px 0;}

.slideProducts .slideWrap:before, .slideProducts .slideWrap:after { content:""; position:absolute; width:0; height:100%; top:0; box-shadow:0 0 12px 5px #e3ecf1; z-index:3;}
.slideProducts .slideWrap:before { left:0;}
.slideProducts .slideWrap:after { right:0;}

.slideProducts .nav a.prev { left:0; background-image:url(../images/pictos/prev-white.png);}
.slideProducts .nav a.next { right:0; background-image:url(../images/pictos/next-white.png);}
.slideProducts { position:relative; margin:25px 45px 20px 45px; height:310px;}
.slideProducts .slide { width:100%; height:310px; position:absolute; left:100%; display:none; top:0;}



.slideProducts .col-25 { width:25%; float:left;}

.col-65 { float:left; width:58%;}

.col-35 { float:right; width:35%;}



.contactForm{ background:#FFF; padding:20px 35px; border-radius:6px; margin-right:30px; box-shadow:0 0 15px rgba(0,0,0,0.15);}

.listingProducts { margin:-15px;}
.listingProducts .col-25 { width:25%; float:left;}
.listingProducts .product { margin:15px;}

.product { padding:10px; background:#FFF; border-radius:6px; margin:5px 15px; box-shadow:0 0 8px rgba(0,0,0,0.15);}
.product a { display:block;  text-decoration:none; color:#333; }
.product .picture {  height:200px; display:block; background:no-repeat center center; background-size:contain}
.product .text {  height:32px; padding-top:8px; line-height:16px; display:block; font-size:14px; font-weight:400; text-align:center; overflow:hidden; }
.product a strong { display:block; text-align:center; height:40px; line-height:40px; background:#333; color:#FFF; border-radius:4px; text-decoration:none; transition:color 0.15s, background-color 0.15s; font-family:"Boogaloo", Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:13px; font-weight:400; margin-top:10px;}
.product a:hover strong { background:#17A6D7; color:#FFF;}
.product.more { padding:0; background:none; box-shadow:none;}
.product.more a { height:310px; display:block; background:#FFF no-repeat center 45% url(../images/pictos/hoverimage-black.png); background-size:60px;  border-radius:4px; position:relative; opacity:0.6; transition:opacity 0.2s; }
.product.more a:hover { background-color:#FFF; background-image:url(../images/pictos/hoverimage-blue.png); opacity:1;}
.product.more a strong { background:none; color:#000; position:absolute; padding:0; line-height:20px; left:10%; top:55%; text-align:center; width:80%; font-size:18px; font-weight:400; transition:none;}
.product.more a:hover strong {  color:#17A6D7; }




.collector #footer { background:#009fe8; }
#footer { padding:40px 25px; background:#E50612; font-size:14px;}
#footer .center { position:relative;}
#footer .wrap { float:left; width:45%;}
#footer .logos { width:55%; float:right; text-align:right;}
#footer .logos img { margin:5px 0 0 5px;}

#footer .wrap ul { float:left; width:50%; list-style:url(../images/pictos/bullet.png); margin:0; padding:0; font-weight:400;}
#footer .wrap ul li { margin:0 12px;}
#footer  a { color:#FFF; color:rgba(255,255,255,0.85);}
#footer hr { border-top-color:rgba(0,0,0,0.15); border-bottom-color:rgba(255,255,255,0.3); margin:25px 0;}
#footer p { color:#FFF; color:rgba(255,255,255,0.85); text-align:center; margin:0; }

#overLayClose { position:fixed; width:36px; height:36px; background:url(../images/pictos/close-black.png) no-repeat center center #FFF; background-size:cover;z-index:110; border-radius:100%; margin:-14px;  cursor:pointer; box-shadow:-2px -3px 3px 1px rgba(0,0,0,0.25); transition:transform 0.1s;}
#overLayClose:hover { transform:scale(1.4,1.4);}
#overLayBox { position:fixed; background:#000 url(../images/load-black.gif) no-repeat center center; top:0; left:0; background-color:rgba(0,0,0,0.9); z-index:100; width:100%; height:100%; }
#putBox { background:#FFF; overflow:auto; position:fixed; z-index:105; left:50%; top:50%; transition:transform 0.3s; opacity:1; border-radius:6px; box-shadow:0 0  0 10px rgba(0,0,0,0.15); -webkit-overflow-scrolling: touch;}
#putBox.load  { transform:scale(0.92,0.92); opacity:0 }

.padder { padding:20px;}

.fiche .col-thumbnails { float:left; width:48%;  width:calc(50% - 20px);}
.fiche .col-thumbnails .mainPicture { padding:49% 0; background:no-repeat center center; background-size:contain; border:5px solid #FFF; }
.fiche .col-infos-produit { float:right; width:48%; width:calc(50% - 20px);}
.fiche .col-infos-produit h3 { color:#17a6d7; margin:0; padding-bottom:12px; border-bottom:1px solid #E5E5E5;}
.fiche .col-infos-produit p { line-height:27px; font-size:14px; margin:0; padding:4px 0; border-bottom:1px solid #E5E5E5; color:#777;}
.fiche .col-infos-produit p strong { color:#222;}
.fiche .col-infos-produit .video { background:#222; border:8px solid #111; border-radius:6px; padding:25% 0; margin:15px 0; height:10px; position:relative;}
.fiche .col-infos-produit .video iframe { position:absolute; width:100%; height:100%; top:0; left:0;}
.fiche p.description { margin:30px 0 0 0; background:#17A6D7; color:#FFF; padding:15px; border-radius:3px; font-weight:400; position:relative;}
.fiche p.description:before { content:""; width:12px; height:12px; margin:-6px; position:absolute; left:50%; top:0; background:#17A6D7; transform:scale(2,1) rotate(45deg); webkit-transform:scale(2,1) rotate(45deg)}

.fiche .col-thumbnails .mainPicture.nothing { background:#FCFCFC no-repeat center center url(../images/nothing.png); box-shadow:0 0 0 2px rgba(0,0,0,0.2); border:none; padding:50% 0;}


 .videoNav { margin:0; border-bottom:1px solid #DDD; font-size:13px; padding:4px 0;} 
 .videoNav span { display:inline-block; margin:0 4px; font-size:18px; line-height:27px;}
 .videoNav a {  font-family:"Boogaloo", Arial, Helvetica, sans-serif;  text-transform:uppercase; display:inline-block; margin:0; line-height:27px;}
  .videoNav a.actif_video { color:#000; text-decoration:none; cursor:text;}

.fiche .thumbnails { margin:5px -2px;}
.fiche .thumbnails span { float:left; width:20%; }
.fiche .thumbnails span a { background:#FFF no-repeat center center; background-size:contain; margin:2px; border:2px solid #DDD; padding:45% 0; display:block; border-radius:3px; opacity:0.5; transition:opacity 0.15s,border-color 0.15s;}
.fiche .thumbnails span a:hover { opacity:1;}
.fiche .thumbnails span a.actif { opacity:1; border-color:#17A6D7;}


.fiche a.pdf { display:inline-block; background:no-repeat 0 center url(../images/pdf.png);    font-family:"Boogaloo", Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:13px; padding-left:25px; height:27px; line-height:27px;}


.shareBar.transparent { background:none; text-align:center; border:none; padding:0; margin:25px 0;}
.shareBar.transparent span { margin-bottom:10px;}
.shareBar.transparent a { background-color:#17A6D7; width:40px; height:40px;}
.shareBar {  padding:10px 0 0 0; border-top:1px solid #EEE; border-radius:6px; border-color:rgba(0,0,0,0.08); background:#FFF;    font-family:"Boogaloo", Arial, Helvetica, sans-serif; text-transform:uppercase; color:#333; margin:10px 0; text-align:left;}
.shareBar span { display:block; line-height:16px; font-size:13px; margin-bottom:6px;}
.shareBar a { height:32px; display:inline-block; margin:0 2px; overflow:hidden; width:32px; overflow:hidden; background:#DADADA no-repeat center center; background-size:cover; text-indent:-5000px; border-radius:100%; transition:background-color 0.15s; }
.shareBar a:hover { background-color:#222;}
.shareBar a.facebook { background-image:url(../images/pictos/facebook.png)}
.shareBar a.twitter { background-image:url(../images/pictos/twitter.png)}
.shareBar a.google { background-image:url(../images/pictos/google.png)}


#gammes { padding:30px 25px 35px 25px;}



#listing-gamme { margin:0 -3px;}
#results-produits { margin:-5px -16px 0 -16px;}
#results-produits .col-20 { float:left; width:25%;}
#results-produits .col-20 .product { margin:18px}

#gammes .col { float:left; width:33.3333333%; }
#gammes .col span { display:block; margin:5px;}
#gammes .col a { display:block; padding:50% 0;  position:relative; background:#EEE no-repeat center center; background-color:rgba(255,255,255,0.3); background-size:cover; border-radius:6px; overflow:hidden; box-shadow:0 0 8px 1px rgba(0,0,0,0.15); }
#gammes .col a span { position:absolute; top:0; width:100%; height:100%; left:0; background:#000 url(../images/pictos/hoverimage.png) no-repeat center center; background-color:rgba(0,0,0,0.7); opacity:0; transition:opacity 0.2s; margin:0; background-size:70px;  padding:1px; border-radius:6px;}
#gammes .col a:hover span { opacity:0.9;}


#pdvs { padding:20px 25px 30px 25px; }
#pdvs h2 { height:34px; line-height:34px; margin:-10px 0; padding-left:60px; color:#000; background:no-repeat 15px center; }
#pdvs h2.FR { background-image:url(../images/FR.png)}
#pdvs h2.BE { background-image:url(../images/BE.png)}
#pdvs .col { float:left; width:20%; }
#pdvs .col span { display:block; margin:5px;}
#pdvs .col a { display:block; padding:50% 0;  position:relative; background:#EEE no-repeat center center; background-color:rgba(255,255,255,0.3); background-size:cover; border-radius:3px; overflow:hidden; box-shadow:0 0 8px 1px rgba(0,0,0,0.15); }
#pdvs .col a span { position:absolute; top:0; width:100%; height:100%; left:0; background:#000 url(../images/pictos/hoverimage.png) no-repeat center center; background-color:rgba(0,0,0,0.7); opacity:0; transition:opacity 0.2s; margin:0; background-size:50px;  padding:1px; border-radius:3px;}
#pdvs .col a:hover span { opacity:0.9;}


.filter { padding:5px 10px; margin:20px 2px 22px 2px; background:#FFF; border-radius:6px;  text-transform:uppercase; color:#999; line-height:50px; position:relative; z-index:5; box-shadow:0 0 15px rgba(0,0,0,0.10);}
.filter .age { font-size:14px; float:left; height:50px;  border:1px solid #DDD; border-width:0 1px; padding:0 10px; margin:0 10px 0 6px;  }
.filter .age span { float:left; margin-right:8px;font-family:"Boogaloo", Arial, Helvetica, sans-serif;}
.filter .age a { float:left; margin:0; width:58px; height:50px; text-align:center; position:relative;transition:color 0.2s;color:#999;}
.filter .age a strong { position:absolute; width:100%;  text-align:center; left:0; top:0; line-height:22px; text-transform:none; font-weight:700; font-size:12px; white-space:nowrap;}
.filter .age a:nth-child(2n) strong { top:auto; bottom:0;}

.filter .age a em { margin:0; border:0; top:50%; margin-top:0; height:2px; background:#CCC; width:100%; left:0; position:absolute;}
.filter .age a span { margin:0; border:0; top:50%; left:50%; background:#FFF; border:2px solid #CCC; z-index:2; height:8px; width:8px; border-radius:100%; position:absolute; margin:-5px -7px;transition:border-color 0.2s;}
.filter .age a:hover { color:#555;}
.filter .age a:hover span { border-color:#555;}

.filter .age a.actif { color:#17a6d7;}
.filter .age a.actif span { border-color:#17a6d7;background-color:#17a6d7;}

.filter .gender { font-size:14px; float:left; height:50px; font-family:"Boogaloo", Arial, Helvetica, sans-serif; }
.filter .gender a { color:#999; text-decoration:none; float:left; margin:0 5px; padding-left:24px; transition:color 0.2s; background:no-repeat 0 center url(../images/check-off.png)}
.filter .gender a:hover { color:#555;}
.filter .gender a.actif { color:#17a6d7; background-image:url(../images/check-on.png)}

.filter .separe { float:left; height:50px; margin:0 8px; width:1px; background:#DDD;}

.filter .selector { float:left; width:215px; cursor:default; border:2px solid #888; line-height:40px; height:40px; margin:3px 0; position:relative; border-radius:3px;  font-family:"Boogaloo", Arial, Helvetica, sans-serif; color:#000; opacity:0.4; transition:opacity 0.1s; font-size:14px;   }
.filter .selector:hover { opacity:1; box-shadow:0 -2px 5px rgba(0,0,0,0.1); border-radius:3px 3px 0 0; z-index:10;}
.filter .selector strong { display:block; padding:0 30px 0 8px; border-radius:3px; background:#FFF url(../images/pictos/arrow-down.png) no-repeat right center; background-size:30px; position:relative; z-index:6; overflow:hidden; white-space:nowrap; }


.filter .selector.actif strong { background-image:none;}
.filter .selector.actif strong:after { background:#FFF; content:""; position:absolute; right:0; top:0; height:100%; width:5px; box-shadow:0 0 10px 10px #FFF;}

.filter .selector strong a { float:left; height:24px; width:24px; background:#000 url(../images/pictos/close-white.png) no-repeat center center; overflow:hidden; text-indent:-5000px; background-size:28px; margin:8px 7px 0 0;  border-radius:100%;}
.filter .selector strong a:hover { background-color:#E02;}


.filter .selector:hover .options { display:block;}
.filter .selector .options { display:none; position:absolute; top:100%; background:#FFF; width:100%; left:-2px;  border:2px solid #888; border-width:0 2px 2px 2px; border-radius:0 0 3px 3px; overflow:hidden; box-shadow:0 2px 5px rgba(0,0,0,0.1); overflow:auto; max-height:400px;}
.filter .selector .options a { display:block; padding:10px 8px; margin:0; border-top:1px solid #DDD; text-decoration:none; line-height:20px; font-size:14px; color:#333;}
.filter .selector .options a:hover { color:#17a6d7; }


#headerGamme {  height:200px; padding:5% 0; background:#EEE no-repeat center center; background-size:contain; border-bottom:1px solid rgba(0,0,0,0.1); }
#gamme { padding:30px 25px; background:no-repeat center center fixed; background-size:cover;  font-weight:400;}
#gamme .intro { font-size:18px; color:#000;}
#gamme .intro img { width:auto; height:auto !important; display:block; margin:1em 0; max-width:100%;}
#gamme .box { padding:31.666% 0; height:0; background:#000 no-repeat center center; background-size:cover; box-shadow:0 0 12px 2px rgba(0,0,0,0.2); border-radius:6px; margin:10px 0; position:relative; overflow:hidden; display:block;}

#gamme .box.small { margin:15px auto; padding:15% 0; height:110px;}

#gamme .box iframe { position:absolute; width:100%; height:100%; top:0; left:0;}


.vignettes { margin:-15px;}
.vignettes .col { float:left; width:33.3333333%; }
.vignettes .col span { display:block; margin:15px;}
.vignettes.heros .col a { padding:34% 0;}
.vignettes .col a { display:block; padding:38% 0;  position:relative; background:#EEE no-repeat center center; background-color:rgba(255,255,255,0.8); background-size:cover; border-radius:6px; overflow:hidden; box-shadow:0 0 10px rgba(0,0,0,0.2); }
.vignettes .col a span { position:absolute; top:0; width:100%; height:100%; padding:1px; left:0; background:#000 url(../images/pictos/hoverimage.png) no-repeat center center; background-color:rgba(0,0,0,0.6); opacity:0; transition:opacity 0.2s; margin:0; background-size:70px;}
.vignettes .col a:hover span { opacity:0.9;}


#actu .center { position:relative;}
#actu .actu { float:left; width:70%;}
#actu .actu .header { position:relative; padding:22.35% 0; background:#DDD no-repeat center center; background-size:cover;}
#actu .actu h1 { margin-top:0; font-size:22px;}
#actu .actu .date { margin:15px 0 0 0; font-size:16px; color:#444;}
#actu .last { float:right; width:30%; margin-top:5px;  }



#actu .actu .wrap { background:#FFF; padding:20px 35px; border-radius:6px; margin-right:30px; box-shadow:0 0 15px rgba(0,0,0,0.12);}
#actu .last .wrap { border-radius:5px; padding:0;  }
#actu .last .wrap h2 { margin:0 0 15px 0; font-size:20px; color:#333;}
#actu .actu .wrap ul { margin:15px 0; padding:0;}
#actu .actu .wrap ul li { margin-left:25px;}

#actu .actu .wrap img {  height:auto !important; max-width:100% !important;margin:15px 0;  display:block; }

#actu .last .item { display:block; position:relative; padding:12px 4px; border-top:1px solid #d9e3e8; border-color:rgba(0,0,0,0.1); color:#444; text-decoration:none; transition:background-color 0.15s;  }
#actu .last .item:hover { background-color:#FFF;background-color:rgba(255,255,255,0.4);}
#actu .last .item .date { display:block; font-weight:400; font-size:14px;  color:#17a6d7;}
#actu .last .item .titre { display:block;  margin:0; font-size:14px; font-weight:400; line-height:140%; }


#actus  { padding:30px 25px; }
#itemize { position:relative; height:80000px; overflow:hidden;}
#actus.hasOpe .actu {  width:49.5%; }
#actus.hasOpe #itemize {  float:left; width:65%; }


#actus .actu { position:absolute;  width:33.333333333%; }
#actus .actu a { display:block; margin:5px; background:#FFF; padding:15px; border-radius:4px; text-decoration:none; position:relative; overflow:hidden; box-shadow:0 0 6px rgba(0,0,0,0.2); color:#000; }
#actus .actu a .picture { display:block;  padding:22.35% 0; background:#EEE no-repeat center center; background-size:cover}
#actus .actu a .date { display:block; margin:6px 0 0 0; font-size:14px; font-weight:700;}
#actus .actu a .titre { display:block; font-family:"Boogaloo", Arial, Helvetica, sans-serif; margin:5px 0; text-transform:uppercase; font-size:16px; line-height:18px; color:#17a6d7;}
#actus .actu a .text { display:block; color:#444; font-size:14px; line-height:130%; }
#actus .actu a .cover { position:absolute; top:0; width:100%; height:100%; left:0; background:#000 url(../images/pictos/hoverimage.png) no-repeat center center; background-color:rgba(0,0,0,0.6); opacity:0; transition:opacity 0.2s; margin:0; background-size:70px;  padding:1px;}
#actus .actu  a:hover .cover { opacity:0.9;}


#presse { padding:30px 25px; }
#presse .presse { position:absolute;  width:33.3%; overflow:hidden;}
#presse .presse div.wrap { display:block; margin:5px; background:#FFF; padding:15px; border-radius:4px; text-decoration:none; position:relative; overflow:hidden; box-shadow:0 0 6px rgba(0,0,0,0.2); color:#000; }
#presse .presse div .picture { display:block; text-align:center; padding-bottom:20px; margin:5px 0 15px 0; border-bottom:1px solid #DDD; }
#presse .presse div .picture img { width:auto; max-height:160px; max-width:100%;}
#presse .presse div .date { display:block; margin:6px 0 0 0; font-size:14px; font-weight:700;}
#presse .presse div .titre { display:block; font-family:"Boogaloo", Arial, Helvetica, sans-serif; margin:5px 0; text-transform:uppercase; font-size:16px; line-height:18px; color:#17a6d7;}
#presse .presse div .text { display:block; color:#444; font-size:14px; line-height:130%; }
#presse .presse div .text p:last-child { margin-bottom:5px;}
#presse .presse div .text p.buttons { margin-top:15px; margin-bottom:7px; padding-top:20px; border-top:1px solid #DDD; text-align:center;}



section.classic { padding:30px 25px; background:#e3ecf1;}
section.white { background:#FFF;}
#who .center { position:relative;}
#who .wrap {  position:relative; background:#FFF; padding:20px 35px; border-radius:6px; box-shadow:0 0 15px rgba(0,0,0,0.10); margin:20px 330px 20px 2px;}
#frise { position:absolute; height:100%; width:260px; top:80px; right:15px; list-style:none; margin:0; padding:0; text-align:right;  }

#frise li { position:relative; margin:0; padding:5px 15px 25px 0;  border-right:2px solid #17A6D7;  }
#frise li:before { position:absolute; width:14px; height:14px; background:#17A6D7; border-radius:100%; content:""; right:0; top:22px; margin:-11px; border:3px solid #e3ecf1}
#frise li p { margin:0; font-size:14px; font-weight:400; line-height:125%; }
#frise li:last-child {  padding-bottom:5px;}
#frise h3 { margin:0; font-size:26px; padding:0; height:28px; line-height:28px;}


.ficheHeros .header { background:#FFF no-repeat center center; background-size:contain; padding:25% 0; height:50px; margin-bottom:20px;}
.ficheHeros { text-align:left; padding:5px;}
.ficheHeros h1 { line-height:130%; font-size:24px; margin-bottom:-5px;}
.ficheHeros p { text-align:left; font-weight:400;}
.ficheHeros p:last-child { margin-bottom:0;}

table.form .champ { box-shadow:0 0 0 1px rgba(0,0,0,0.2); border:none; background:#FFF; padding:10px; width:100%; font-family:"Roboto Condensed", Arial, Helvetica, sans-serif; font-weight:300;  font-size:16px;}
table.form .champ.error { box-shadow:0 0 0 1px #E02 , 0 0 0 1px #E02 inset; background:#FFE6E6;}
table.form th { font-weight:400; text-align:left; padding-right:15px; white-space:nowrap; vertical-align:top;}
table.form td { width:100%;}
table.form th, table.form td { padding-top:3px; padding-bottom:3px;}
table.form th { padding-top:12px;}


.pin {
	height: 40px;
	width: 32px;
	background: url(../images/pin.png) no-repeat center center;
	position: relative;
}

#map { background:#FAFAFA; padding:30% 0; border:5px solid #FFF; box-shadow:0 0 10px rgba(0,0,0,0.15); margin:30px 0 0 0;}
#map.open { position:fixed !important; top:10%; left:5%; width:90%; height:80%; z-index:500; margin:-5px; padding:0; box-shadow:0 0 0 200px rgba(0,0,0,0.7);}
#map a.expend { width:30px; height:30px; background:#FFF url(../images/enlarge.png) no-repeat center center; position:absolute; right:10px; top:10px; z-index:5; box-shadow:0 0 3px 1px rgba(0,0,0,0.2); border-radius:3px; background-size:24px;}
#map.open a.expend { background-image:url(../images/pictos/close-black.png); background-size:30px;}

#nav_actu { text-align:center;}
#nav_actu a , #nav_actu span { display:inline-block; text-decoration:none; padding:6px 8px; line-height:20px; margin:5px;  font-family:"Boogaloo", Arial, Helvetica, sans-serif; background:#FFF;  border-radius:3px; box-shadow:0 0 3px rgba(0,0,0,0.15);}
 #nav_actu span { background:#E50612; color:#FFF; }


#cookiesDisclaimer { position:fixed; width:94%; bottom:0; left:3%; z-index:20;}
#cookiesDisclaimer div { background:#F7E771; position:relative; margin:0 auto 20px auto; max-width:1100px; padding:12px 60px 12px 15px; border-radius:3px; box-shadow:0 0 10px 2px rgba(0,0,0,0.3); font-weight:400; color:#000; font-size:13px;}
#cookiesDisclaimer div a { color:#000; text-decoration:underline;}
#cookiesDisclaimer div a.close { position:absolute; right:0; top:0; height:100%; width:44px; border-left:1px solid rgba(0,0,0,0.1); background:rgba(255,255,255,0.3) no-repeat center center url(../images/pictos/close-black.png); background-size:42px;}


#search .center { position:relative; min-height:260px;}
#search .searchResults { margin:24px 250px 0 0;}
#search .searchCat { position:absolute; right:0; width:220px; top:20px;}
#search .searchCat h2 { margin-bottom:15px;}
#search .searchCat hr { margin:0;}
#search .searchCat a { display:block; padding:10px 4px; font-size:13px; line-height:20px; color:#444; color:rgba(0,0,0,0.6); text-decoration:none; position:relative; margin:0 0;}
#search .searchCat a em { position:absolute; top:50%; margin-top:-10px; right:7px;}
#search .searchCat a strong { display:block; font-size:18px; font-weight:400; color:#222; font-family:"Boogaloo", Arial, Helvetica, sans-serif;}
#search .searchCat a.actif strong  { font-weight:400; color:#E30613;}
#search .searchCat a:hover , #search .searchCat a.actif { background-color:#FFF; background-color:rgba(255,255,255,0.5);}


#search a.result { display:block; background:#EEE; background-color:rgba(255,255,255,0.5); padding:15px 15px 15px 110px; position:relative; margin:5px 0; border-radius:3px; font-size:14px; color:#000; text-decoration:none; overflow:hidden; }
#search a.result .picture { position:absolute; width:84px; height:84px; background:#FFF no-repeat center center; background-size:cover; border-radius:100%; left:12px; top:12px; box-shadow:0 0 10px 1px rgba(0,0,0,0.15) inset;}
#search a.result .text { display:block; line-height:17px; margin:5px 0;}
#search a.result strong { display:block; font-size:18px; font-family:"Boogaloo", Arial, Helvetica, sans-serif; color:#000; line-height:20px;}
#search a.result:hover { background-color:#FFF;}
#search a.result em { display:block; line-height:14px; margin:8px 0 0 0; padding-top:8px; border-top:1px solid rgba(0,0,0,0.1); font-style:normal; font-size:12px; color:rgba(0,0,0,0.7);}

#opesPromo { float:right; width:35%;}
#opesPromo div { margin:0 5px 0 25px;}
.opePromo { position:relative; margin:5px 0 10px 0; padding: 31.666% 0; display:block; background:#FFF no-repeat center center; background-size:cover; box-shadow:0 0 6px rgba(0,0,0,0.2); border-radius:3px; overflow:hidden;}
.opePromo .cache { background:#000; background:rgba(0,0,0,0.65); position:absolute; width:100%; height:100%; top:0; left:0; display:none;}
.opePromo:hover .cache { display:block;}
.opePromo .cache a { float:left; width:50%; height:100%; box-shadow:0 0 0 1px rgba(255,255,255,0.15); position:relative;  background:no-repeat center center; background-size:contain; transition:background-color 0.15s;}
.opePromo .cache a:hover { background-color:rgba(0,0,0,0.7); z-index:2; }
.opePromo .cache a.pdf { background-image:url(../images/ope-pdf.png)}
.opePromo .cache a.mentions { background-image:url(../images/ope-mentions.png)}

#quizz { font-weight:400;}
.question { margin:30px 0;}
.question h4 { color:#000; margin:0;}
.question table { width:100%; border-collapse:collapse; margin:15px 0;}
.question table td { padding:8px 2px; border:1px solid #E2E2E2; border-width:1px 0; position:relative; }

.question p { margin:0; font-size:14px; font-weight:300; color:#888; font-style:italic; line-height:120%;}
.question p a { color:#888;}
.question p strong { font-weight:300; color:#333; font-style:normal;}

.question label { cursor:pointer;}

.question input[type="radio"] {
    display:none;
}

.question input[type="radio"] + label span {
    display:inline-block;
    width:16px;
    height:16px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  50%;
    border-radius:  50%;
	border:1px solid #CCC;
	box-shadow:0 0 0 2px #FFF inset , 0 0 5px 1px rgba(0,0,0,0.15) inset;
}

.question input[type="radio"] + label span {
     background-color:#EEE;
}

.question input[type="radio"] + label:hover span{
     background-color:#BBB;
}

.question input[type="radio"]:checked + label span{
     background-color:#17A6D7;
}

.question input[type="radio"] + label span,
.question input[type="radio"]:checked + label span {
  -webkit-transition:background-color 0.2s linear;
  -o-transition:background-color 0.2s linear;
  -moz-transition:background-color 0.2s linear;
  transition:background-color 0.2s linear;
}

ul li p { margin:0;}


form { position:relative;}

.loaderForm { position:absolute; width:100%; height:100%; top:-10px; left:-10px; z-index:2; padding:10px; background:#FFF no-repeat center center url(../images/load-white.gif); background-color:rgba(255,255,255,0.6); opacity:0.8;}


.col-quizz {position:absolute; width:330px; margin:2px 0 0 0;}
.boxFormQuizz.exists { padding-left:380px; min-height:300px;}

.col-quizz a { display:block; padding:50% 0; background:#FFF no-repeat center center; border-radius:6px; box-shadow:0 0 10px rgba(0,0,0,0.2); background-size:cover;}


#goTop { position:fixed; opacity:0.6; transition:opacity 0.2s; width:50px; height:50px; border-radius:100%; background:url(../images/pictos/arrow-top.png) no-repeat center center; bottom:30px; right:30px; background-size:cover; display:none;}
#goTop:hover { opacity:1;}
#footer .social { text-align:center; font-size:0; line-height:0;}
#footer .social a { background:no-repeat center center; background-size:cover; display:inline-block; width:54px; height:54px; border-radius:100%; margin:5px; opacity:0.6;  transition:opacity 0.2s;}
#footer .social a:hover { opacity: 0.9; }
#footer .social a.facebook { background-image:url(../images/social-facebook.png)}
#footer .social a.youtube { background-image:url(../images/social-youtube.png)}
#footer .social a.pinterest { background-image:url(../images/social-pinterest.png)}
#footer .social a.instagram { background-image:url(../images/social-instagram.png);}
#footer .social a.instagram2 { background-image:url(../images/social-instagram2.png);}
#footer .social a.pro { background-image:url(../images/social-pro.png)}