/*
Theme Name: BCAP
Theme URL: www.bcap.eu
Description: The innovative unit dosing and refill cap, easy to use
Author: Francois Vanesse (www.vanois.be)
*/
/*
Autheur CSS : Francois Vanesse
Agence : Vanois.be
Client : BCAP
Date : april 2014
Réf.couleur :
vert foncé #68C1BF -> cosmetic
bleu clair #9AD6EE -> cleaning
vert clair #88D235 -> beverage
vieux rose #C53E83 -> healthcare
gris foncé #353434 -> bg product bar
gris moyen #757373 -> nav hover
noir #494949 -> txt, default
*/
/* LIGHT RESET
http://meyerweb.com/eric/tools/css/reset/
v2.0
/------------------------------------*/
*{font-family: 'microsoft yahei'}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
font-family: 'microsoft yahei';
}
a{font-family: 'microsoft yahei'}
p{font-family: 'microsoft yahei'}
span{font-family: 'microsoft yahei'}
div{font-family: 'microsoft yahei'}
:focus {outline-color:transparent; outline-style:none}
/* HTML5 reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}
ol, ul, dl { list-style: none; }
blockquote, q { quotes: none;}
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;}
table { border-collapse: collapse; border-spacing: 0;}
/* TOOLS
/------------------------------------*/
/* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */
.clear:before, .clear:after { content: ""; display: table; }
.clear:after { clear: both; }
.clear { zoom: 1; }
/* Arrondis */
.arrondi_4 { -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; }
.arrondi_2h { -webkit-border-top-right-radius:4px; -moz-border-radius-topright:4px; border-top-right-radius:4px;
-webkit-border-top-left-radius:4px; -moz-border-radius-topleft:4px; border-top-left-radius:4px;}
.arrondi_2b { -webkit-border-bottom-right-radius:4px; -moz-border-radius-bottomright:4px; border-bottom-right-radius:4px;
-webkit-border-bottom-left-radius:4px; -moz-border-radius-bottomleft:4px; border-bottom-left-radius:4px;}
.arrondi_2g { -webkit-border-top-left-radius:4px; -moz-border-radius-topleft:4px; border-top-left-radius:4px;
-webkit-border-bottom-left-radius:4px; -moz-border-radius-bottomleft:4px; border-bottom-left-radius:4px;}
.arrondi_2d { -webkit-border-top-right-radius:4px; -moz-border-radius-topright:4px; border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px; -moz-border-radius-bottomright:4px; border-bottom-right-radius:4px;}
/** colorbox */
#cboxOverlay{ background:#000; position:fixed; width:100%; height:100%; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxError{padding:50px; border:1px solid #ccc;}
#colorbox, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
.cboxIframe{background:#000;width:100%; height:100%; display:block; border:0;}
#cboxContent{position:relative; margin:60px; overflow:visible;}
#cboxLoadedContent{background:#FFF; padding:5px;} /*border autour de l'image*/
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
#cboxLoadingGraphic{background: url(js/colorbox/loading.gif) no-repeat center center;}
#cboxLoadingOverlay{background:#000;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxTitle{position:absolute; top:-22px; left:0; margin:0; color:#fff; visibility:hidden;} /* visibility:hidden pour ne pas afficher le titre */
#cboxPrevious, #cboxNext, #cboxClose{text-indent:-9999px; width:50px; height:50px; position:absolute; background: url(../images/controls.png) no-repeat 0 0; border:none; cursor:pointer;}
#cboxPrevious {background-position:0px 0px; top:50%; left:-60px;} /* position à matcher avec margin #cboxContent */
#cboxPrevious:hover {background-position:0px -50px; top:50%; left:-60px;}
#cboxNext {background-position:-50px 0px; top:50%; right:-60px;}
#cboxNext:hover {background-position:-50px -50px; top:50%; right:-60px;}
#cboxClose {background-position:-100px 0px; top:-50px; right:-50px;}
#cboxClose:hover {background-position:-100px -50px; top:-50px; right:-50px;}
/** bx-slider */
.bx-wrapper {}
.bx-viewport {z-index:1}
/* .bx-controls-direction { opacity:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); }
.bx-wrapper:hover .bx-controls-direction { opacity:1.0 ; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); }
*/
.bx-prev, .bx-next { display:block; position:absolute; width:25px; height:25px; z-index:50; background-image:url(../images/sprite-norepeat.png); background-repeat: no-repeat ;
cursor:pointer; text-indent:-9999px; /*no txt via js*/ }
.bx-prev { background-position:0px -330px; top:0px; left:0px }
.bx-prev:hover { background-position:0px -360px; }
.bx-next { background-position:-30px -330px; top:0px; left:40px }
.bx-next:hover { background-position:-30px -360px; }
.bx-pager {position:absolute; bottom:20px; left:0px; padding-left:40px; z-index:2}
.bx-pager-item {float:left;}
.bx-pager-link {display:block; width:16px; height:16px; margin-right:6px; font-size:0px; color:transparent; background-image:url(../images/sprite-norepeat.png); background-repeat:no-repeat; background-position:-220px -50px;}
.bx-pager-link.active {background-position:-240px -50px;}
/*clear*/ .bx-pager:before, .bx-pager:after { content: ""; display: table; } .bx-pager:after { clear: both; } .bx-pager { zoom: 1; }
/** Formulaire */
.wpcf7-form { margin:0px; padding:0px; } /* wrapper form */
.wpcf7-display-none {display:none;}
/* input*/
input[type="text"],
input[type="email"] { width:94%; height:34px; padding:0 10px; margin-top:5px;
font-size:13px; line-height:34px; color:#d6d3d4; text-align:left;
background-color:#FFF; border:2px solid #d4d2d3 ;-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
margin-bottom:10px; }
input[type="text"]:focus,
input[type="email"]:focus,
input[type="file"]:focus { border:2px solid #494949; color:#404040; }
textarea { width:94%; padding:10px ;margin-bottom:10px; margin-top:5px;
font-size:13px !important; line-height:16px; color:#d6d3d4 !important; text-align:left;
background-color:#FFF; border:2px solid #d4d2d3 ;-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
overflow: auto; /*remove scrollbar on ie*/
}
textarea:focus { border:2px solid #494949; color:#404040;}
input[type="submit"] {/* via .button */}
/* Texte */
.wpcf7-form p.titre {margin:30px 0px 15px 0px; font-family: 'microsoft yahei','folksbold'; font-size:18px; text-transform:uppercase}
.wpcf7-form .form-acceptance-txt { padding:20px; margin:40px 0px; max-height:150px;
border:2px solid #d4d2d3 ;-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
font-size:12px; line-height:13px; color:#d6d3d4; overflow:auto;}
.wpcf7-form .form-acceptance-txt h1 {font-size:14px; margin:10px 0px;}
/* label */
.wpcf7-form .label {font-size:14px; color:#006092;}
.wpcf7-form .requis {font-size:11px; color:#AAA}
/* checkbox - dropdown */
.wpcf7-list-item {display:inline-block; margin:0 20px 5px 0px; font-size:14px;}
.wpcf7-select option, .wpcf7-list-item-label {margin-bottom:3px;}
div.wpcf7 .watermark {color: #888;}
/* Validation */
.wpcf7-form-control-wrap { display:block; position:relative;} /* class couvrant tous les */
.wpcf7-form-control {display:block}
.wpcf7-response-output {margin:10px 0px; padding:10px; color:#FFF; text-align:center; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;} /* box message de validation ou d'erreur */
.wpcf7-mail-sent-ok {background:#3C0;} /* message "mail bien envoyé" */
.wpcf7-mail-sent-ng {background:#3C0;} /* message "mail bien envoyé" */
.wpcf7-spam-blocked {background:#F00;} /* message "échec, considérer comme spam" */
.wpcf7-validation-errors {background:#FF9B00;} /* message "erreur, vérifier les champs obligatoire" */
.wpcf7-not-valid-tip,
.wpcf7-not-valid-tip-no-ajax {position:relative; top:3px; color:#F00; font-size:90%; z-index:100; display:block;} /* "veuiller remplir le champ obligatoire" */
.wpcf7 img.ajax-loader { border:none; vertical-align:middle; margin-left:4px;}
/** galerie d'image vanois (responsive et border)
* function.php remplacement de la galerie WP par la galerie Vanois
* function.php ajout de la class colorbox pour déclencher l'effet
* Effet border en responsive :
* - background et padding sur gallery DL
* - background blanc sur pour whitespace et image pour effet de survol
* - margin autour d'img pour whitespace
*/
.gallery { overflow: hidden; width: 100%;}
.gallery dl {float: left; position: relative; min-height: 1px; height: auto !important; height: 1px; text-align: center; margin:0px; margin-right:2%; margin-bottom:2%; padding:0.75%; background-color:#DDD }
.gallery dl dt {}
.gallery a {display:block; background:#fff url(../images/gallery_hover_plus.png) no-repeat center center; overflow:hidden}
.wp-content .gallery a:after { content:''}
.gallery img { width:94% !important; height:auto; margin:3% /* whitespace pour effet border */}
.gallery .gallery-caption {margin-left: 0; font-size:80%; color:#666}
.gallery dl:hover { background-color:#666; transition: background-color 0.3s linear; -o-transition: background-color 0.3s linear; -moz-transition: background-color 0.3s linear; -webkit-transition: background-color 0.3s linear; }
.gallery dl:hover img { opacity:0.5; /*moz, IE9*/ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*IE8*/ filter: alpha(opacity=50); /*IE7*/
/*sauf IE*/ transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; -moz-transition: opacity 0.3s linear; -webkit-transition: opacity 0.3s linear; }
.gallery dl:hover .gallery-caption {color:#FFF}
.gallery br { clear: both }
/* ((100% - (2% margin-right x nbre-col)) / nbre-col) - (2 x 0.75% padding))
* ex : 3 colonnes
* 1) 100% - 2% x 2 intervals = 96%
* 2) 96% / 3 colonnes = 32%, soit largeur d'une colonne
* 3) 32% - (2 x 0.75 padding) = 30.5%, soit la largeur d'un élément
*/
.gallery-columns-2 dl { width: 47.5%; }
.gallery-columns-3 dl { width: 30.5%; }
.gallery-columns-4 dl { width: 22%; }
.gallery-columns-5 dl { width: 16.9%; }
.gallery-columns-6 dl { width: 13.5%; }
.gallery-columns-7 dl { width: 11.0714%; }
.gallery-columns-8 dl { width: 9.25%; }
.gallery-columns-9 dl { width: 7.8332%; }
.gallery-columns-1 dl,
.gallery-columns-2 dl+dl,
.gallery-columns-3 dl+dl+dl,
.gallery-columns-4 dl+dl+dl+dl,
.gallery-columns-5 dl+dl+dl+dl+dl,
.gallery-columns-6 dl+dl+dl+dl+dl+dl,
.gallery-columns-7 dl+dl+dl+dl+dl+dl+dl,
.gallery-columns-8 dl+dl+dl+dl+dl+dl+dl+dl,
.gallery-columns-9 dl+dl+dl+dl+dl+dl+dl+dl+dl { margin-right: 0; }
/** FONT
/-------------------------------------*/
/* font-weight:300 -> Light
font-weight:400 -> Regular
font-weight:600 -> Semi-Bold
font-weight:700 -> Bold
font-weight:800 -> Extra-Bold */
html,
textarea { font-family: 'microsoft yahei', 'Open Sans',Helvetica, Arial, sans-serif;
-webkit-text-size-adjust: none;
font-weight:400;
font-size:14px;
word-wrap: break-word;
color:#494949}
strong { font-weight:700; }
em { font-style:italic; }
a { text-decoration:none; }
a:hover { text-decoration:none;}
/* Déclarations générales */
.aligncenter { display:block; margin: 0 auto;}
.textcenter { text-align:center;}
.uppercase { text-transform:uppercase}
/* Wp-style */
.wp-content {padding-bottom:20px}
.wp-content h1, .wp-content h2, .wp-content h3,
.wp-content h4, .wp-content h5, .wp-content h6 { margin:5px 0px; color:#000 }
.wp-content h1 { font-size:24px;}
.wp-content h2 { font-size:20px;}
.wp-content h3 { font-size:18px;}
.wp-content h4 { font-size:17px;}
.wp-content h5 { font-size:16px;}
.wp-content h6 { font-size:15px;}
/* product healthcare */
.page-id-42 .wp-content h1,
.page-id-42 .wp-content h2,
.page-id-42 .wp-content h3,
.page-id-42 .wp-content h4,
.page-id-42 .wp-content h5,
.page-id-42 .wp-content h6 {color:#E76B8D}
.page-id-42 .txt-devant-gif-anime.wp-content h1,
.page-id-42 .txt-devant-gif-anime.wp-content h2,
.page-id-42 .txt-devant-gif-anime.wp-content h3,
.page-id-42 .txt-devant-gif-anime.wp-content h4,
.page-id-42 .txt-devant-gif-anime.wp-content h5,
.page-id-42 .txt-devant-gif-anime.wp-content h6,
.page-id-42 .txt-devant-gif-anime.wp-content p {color:#A84084} /* bouteille rose*/
/* product cosmetic-innovative*/
.page-id-33 .wp-content h1,
.page-id-33 .wp-content h2,
.page-id-33 .wp-content h3,
.page-id-33 .wp-content h4,
.page-id-33 .wp-content h5,
.page-id-33 .wp-content h6 {color:#42A19B}
.page-id-33 .txt-devant-gif-anime.wp-content h1,
.page-id-33 .txt-devant-gif-anime.wp-content h2,
.page-id-33 .txt-devant-gif-anime.wp-content h3,
.page-id-33 .txt-devant-gif-anime.wp-content h4,
.page-id-33 .txt-devant-gif-anime.wp-content h5,
.page-id-33 .txt-devant-gif-anime.wp-content h6,
.page-id-33 .txt-devant-gif-anime.wp-content p {color:#878F13} /* flacon jaune */
/* product cleaning*/
.page-id-10 .wp-content h1,
.page-id-10 .wp-content h2,
.page-id-10 .wp-content h3,
.page-id-10 .wp-content h4,
.page-id-10 .wp-content h5,
.page-id-10 .wp-content h6 {color:#4EC5E7}
.page-id-10 .txt-devant-gif-anime.wp-content h1,
.page-id-10 .txt-devant-gif-anime.wp-content h2,
.page-id-10 .txt-devant-gif-anime.wp-content h3,
.page-id-10 .txt-devant-gif-anime.wp-content h4,
.page-id-10 .txt-devant-gif-anime.wp-content h5,
.page-id-10 .txt-devant-gif-anime.wp-content h6,
.page-id-10 .txt-devant-gif-anime.wp-content p {color:#5E80A1} /* spray light turquoise */
.page-id-10 .txt-devant-gif-anime.wp-content {padding-left:5%}
/* product beverage*/
.page-id-37 .wp-content h1,
.page-id-37 .wp-content h2,
.page-id-37 .wp-content h3,
.page-id-37 .wp-content h4,
.page-id-37 .wp-content h5,
.page-id-37 .wp-content h6 {color:#8AC7A5}
.page-id-37 .txt-devant-gif-anime.wp-content h1,
.page-id-37 .txt-devant-gif-anime.wp-content h2,
.page-id-37 .txt-devant-gif-anime.wp-content h3,
.page-id-37 .txt-devant-gif-anime.wp-content h4,
.page-id-37 .txt-devant-gif-anime.wp-content h5,
.page-id-37 .txt-devant-gif-anime.wp-content h6,
.page-id-37 .txt-devant-gif-anime.wp-content p {color:#28beff} /* flacon bleu */
/* Eco performance */
.page-id-49 .wp-content h1,
.page-id-49 .wp-content h2,
.page-id-49 .wp-content h3,
.page-id-49 .wp-content h4,
.page-id-49 .wp-content h5,
.page-id-49 .wp-content h6 {color:#7C9BBB}
/* Technology */
.page-id-57 .wp-content h1,
.page-id-57 .wp-content h2,
.page-id-57 .wp-content h3,
.page-id-57 .wp-content h4,
.page-id-57 .wp-content h5,
.page-id-57 .wp-content h6 {color:#7C9BBB}
/* Service*/
.page-id-60 .wp-content h1,
.page-id-60 .wp-content h2,
.page-id-60 .wp-content h3,
.page-id-60 .wp-content h4,
.page-id-60 .wp-content h5,
.page-id-60 .wp-content h6 {color:#7C9BBB}
.wp-content p { font-size:14px; line-height:22px; margin-bottom:11px;}
.wp-content ul,
.wp-content ol { list-style-position:outside; margin:0% 0% 0% 5%;}
.wp-content ul { list-style-type: circle;}
.wp-content ol { list-style:decimal; }
.wp-content li { font-size:14px; line-height:20px;}
.wp-content a { color:#424558; font-weight:600; cursor:pointer}
.wp-content a:hover { text-decoration:underline}
.wp-content hr { border:none; border-bottom:1px solid #DADADA}
.wp-content img { height: auto; max-width: 100%; width: auto;}
.wp-content .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;}
.wp-content .video-container iframe,
.wp-content .video-container object,
.wp-content .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.wp-content blockquote { padding:16px; background:#7C9BBB; color:#FFF;}
.wp-content blockquote h1, .wp-content blockquote h2, .wp-content blockquote h3,
.wp-content blockquote h4, .wp-content blockquote h5, .wp-content blockquote h6 {color:#FFF !important}
.wp-content table td.bcap {background:#7C9BBB; color:#FFF}
.wp-content table td {padding:8px 4px}
/* LAYOUT
/-------------------------------------*/
/* Déclarations générales */
.inline-block { display:inline-block; *display:inline; zoom:1;} /*@bugfix IE6 - IE7 */
.floatleft , .alignleft { float: left; margin-right:25px; margin-bottom:25px; }
.floatright, .alignright { float: right; margin-left:25px; margin-bottom:25px; }
.responsive { display:block; max-width: 100%; height:auto; width:auto; margin:auto}
.hidden {display: none;}
.show-on-print {display:none; visibility:hidden;}
.show-on-desktop, .show-on-desktop-and-tablet, .show-on-desktop-and-phone {display:block !important;}
.show-on-tablet, .show-on-phone, .show-on-tablet-and-phone {display:none !important;}
/* Colonnes responsives
- Fonctionne comme ceci
- bla bla bla
- bla bla bla
*/
.col2 dd, .col3 dd, .col4 dd {position:relative; float:left; min-height:1px; height:auto !important; height:1px; margin-left:2%; }
.col2 dd { width:49.00%; } .col2 dd:first-child { margin-left: 0 !important; clear: left !important;}
.col2 dd.col66 { width:66.00%; }
.col2 dd.col33 { width:32.00%; }
.col3 dd { width:32%; } .col3 dd:first-child { margin-left: 0 !important; clear: left !important;}
.col4 dd { width:23.50%; } .col4 dd:first-child { margin-left: 0 !important; clear: left !important;}
/* SPRITES */
.sprite {background-image:url(../images/sprite-norepeat.png); background-repeat:no-repeat}
.sprite_logo{ float: left;background-image:url(../images/bcap_c.png); background-repeat:no-repeat; display: block; width: 280px;height: 61px;margin-left: 20px;}
.show-on-desktop .logo {display:block; width:172px; height:61px; margin-left:20px; background-position:0px -87px;}
.show-on-tablet .logo {display:block; width:172px; height:61px; margin:0px; background-position:0px -87px;}
.show-on-phone .logo {display:block; width:180px; height:50px; margin:0px; background-image: url(../images/bcap_c.png);background-size: 180px;}
.logo-white {display:block; width:174px; height:60px; margin:0px; background-position:0px -87px;}
.logo-white-xs {display:block; width:137px; height:47px; margin:0px; background-position:0px -270px;}
.footer-content .ico.round-cleaning {display:block; float:left; width:38px; height:38px; margin:0px 8px 8px 0; background-position:-220px 0px;}
.footer-content .ico.round-innovative {display:block; float:left; width:38px; height:38px; margin:0px 8px 8px 0; background-position:-260px 0px;}
.footer-content .ico.round-cosmetics {display:block; float:left; width:38px; height:38px; margin:0px 8px 8px 0; background-position:-260px 0px;}
.footer-content .ico.round-beverage {display:block; float:left; width:38px; height:38px; margin:0px 8px 8px 0; background-position:-300px 0px;}
.footer-content .ico.round-healthcare {display:block; float:left; width:38px; height:38px; margin:0px 0px 8px 0; background-position:-340px 0px;}
.footer-content .ico.ln {display:block; float:left; width:32px; height:32px; margin:8px 0 0 0; background-position:-380px 0px;}
.footer-content .ico.fb {display:block; float:left; width:32px; height:32px; margin:8px 4px 0 0; background-position:-415px 0px;}
.footer-content .ico.tw {display:block; float:left; width:32px; height:32px; margin:8px 4px 0 0; background-position:-415px -40px;}
.product-cta-item.cleaning span.sprite {display:block; width:39px; height:46px; background-position:-220px -120px;}
.product-cta-item.innovative span.sprite {display:block; width:40px; height:46px; background-position:-259px -121px;}
.product-cta-item.cosmetics span.sprite {display:block; width:40px; height:46px; background-position:-259px -121px;}
.product-cta-item.beverage span.sprite {display:block; width:37px; height:46px; background-position:-299px -121px;}
.product-cta-item.healthcare span.sprite {display:block; width:37px; height:46px; background-position:-336px -127px;}
/*
.product-cta-item.cleaning span.sprite {display:block; width:39px; height:46px; background-position:-220px -70px;}
.product-cta-item.innovative span.sprite {display:block; width:40px; height:46px; background-position:-259px -71px;}
.product-cta-item.beverage span.sprite {display:block; width:37px; height:46px; background-position:-299px -71px;}
.product-cta-item.healthcare span.sprite {display:block; width:37px; height:46px; background-position:-336px -77px;}
.product-cta-item.cleaning.current-item span.sprite, .product-cta-item.cleaning:hover span.sprite {background-position:-220px -120px;}
.product-cta-item.innovative.current-item span.sprite, .product-cta-item.innovative:hover span.sprite {background-position:-259px -121px;}
.product-cta-item.beverage.current-item span.sprite, .product-cta-item.beverage:hover span.sprite {background-position:-299px -121px;}
.product-cta-item.healthcare.current-item span.sprite, .product-cta-item.healthcare:hover span.sprite {background-position:-336px -127px;}
*/
.services .cms-cta-bloc-ico {display:inline-block; width:94px; height:94px; margin:10px auto 20px auto; background-position:-220px -180px;}
.eco-performance .cms-cta-bloc-ico {display:inline-block; width:94px; height:94px; margin:10px auto 20px auto; background-position:-220px -280px;}
.dosing-technology .cms-cta-bloc-ico {display:inline-block; width:94px; height:94px; margin:10px auto 20px auto; background-position:-220px -380px;}
.services:hover .cms-cta-bloc-ico {background-position:-320px -180px;}
.eco-performance:hover .cms-cta-bloc-ico {background-position:-320px -280px;}
.dosing-technology:hover .cms-cta-bloc-ico {background-position:-320px -380px;}
/* button */
.button { display:inline-block; padding:15px; margin:0 auto; border:none 0px; font-size:12px; font-weight:600; text-align:center; cursor:pointer; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
.button.gris {background-color:#757373; color:#FFF; }
.button.gris:hover {background-color:#494949; color:#FFF; }
.button:hover {text-decoration:none !important}
/* SECTIONS */
/* wrapper & content */
.header-wrapper,
.section-wrapper,
.footer-wrapper {display:block; width:96%; padding-left:2%; padding-right:2%; position:relative}
.section-content,
.footer-content {display:block; position:relative; max-width:960px; margin:0 auto; padding-left:0px; padding-right:0px; }
/* HEADER */
.header-wrapper {/*border-bottom:4px solid #757373;*/}
.header-content {padding-top:5px; padding-bottom:5px; }
.show-on-desktop .menu { display:block; float:right; margin-top:35px}
.show-on-desktop .logo { float:left}
.show-on-tablet .logo { display:block; margin:0px auto; }
.show-on-tablet .menu { display:block; margin:10px auto; text-align:center}
.show-on-phone .menu {width:100%; margin:20px 0px;}
.show-on-phone .logo { display:block; margin-top:19px auto; }
/* nav desktop+tablet */
/* niv 1 + hover */
.menu-item { display:inline-block; position:relative; }
.menu-item a{ display:block; padding:0px 13px; color:#757373; font-size:14px; line-height:12px; font-weight:600; text-align:left; cursor:pointer; }
.menu-item a:hover,
.menu-item.current-menu-item a,
.menu-item.current-menu-ancestor > a,
.menu-item.sub-menu-visible > a { color:#D14E4D; }
.subnav-arrow {display:none}
/* niv 2 + hover */
.sub-menu {display:block; position:absolute; top:20px; z-index:3;}
.sub-menu .menu-item { width:200px}
.sub-menu .menu-item > a {display:block; padding:0px 15px 0px 45px; /*v1.1*/ margin-bottom:0px; line-height:40px; background-color:#FFF; color:#747373; background-image:url(../images/sprite-norepeat.png); background-repeat:no-repeat; }
.sub-menu .cleaning.menu-item a {background-position:-450px 0px;}
.sub-menu .innovative.menu-item a {background-position:-450px -50px;}
.sub-menu .cosmetics.menu-item a {background-position:-450px -50px;}
.sub-menu .beverage.menu-item a {background-position:-450px -100px;}
.sub-menu .healthcare.menu-item a {background-position:-450px -150px;}
/* v1.1
.menu ul li ul.sub-menu li:first-child a { -webkit-border-bottom-left-radius:0px;-moz-border-radius-bottomleft:0px;border-bottom-left-radius:0px;-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;}
.menu ul li ul.sub-menu li:last-child a { -webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;-webkit-border-top-right-radius:0px;-moz-border-radius-topright:0px;border-top-right-radius:0px;}
*/
.sub-menu .menu-item a:hover,
.sub-menu .menu-item.current-menu-item a { color:#D14E4D; }
/* nav phone */
/* niv 1 + hover */
.show-on-phone .menu-trigger { position:absolute; top:5px; right:5px; padding:10px 10px; background:#757373; text-align:center; color:#FFF; cursor:pointer }
.menu-trigger a{ color:#fff}
.show-on-phone .menu-trigger2 { position:absolute; top:5px; right:5px; padding:10px 10px; background:#757373; text-align:center; color:#FFF; cursor:pointer }
.menu-trigger2 a{ color:#fff}
.show-on-phone .menu-item { display:block; width:100%; margin:0;}
.show-on-phone .menu-item a { position:relative; width:80%; padding:18px 10%; margin-bottom:6px; color:#757373; text-align:left; background-color:#EEE; }
/* v1.1
.show-on-phone .menu ul li:first-child a {-webkit-border-bottom-left-radius:0px;-moz-border-radius-bottomleft:0px;border-bottom-left-radius:0px;-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;}
.show-on-phone .menu ul li:last-child a {-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;-webkit-border-top-right-radius:0px;-moz-border-radius-topright:0px;border-top-right-radius:0px;}
*/
.show-on-phone .menu-item.sub-menu-visible a { background:#888B94; color:#FFFFFF; }
.show-on-phone .menu-item a:hover,
.show-on-phone .menu-item.current-menu-item a,
.show-on-phone .menu-item.sub-menu-visible.current-menu-parent a { background:#757373; color:#FFFFFF; }
.show-on-phone .menu-item .subnav-arrow {display:block; width: 0; height: 0; float: right; margin-top: 2px; border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 12px solid #c1c1c1;}
.show-on-phone .menu-item.sub-menu-visible .subnav-arrow { border: none; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 12px solid #FFF;}
/* niv 2 + hover */
.show-on-phone .sub-menu {display:block; position:relative; top:0px; z-index:1; padding:6px}
.show-on-phone .sub-menu .menu-item { /*v1.1*/ margin-bottom:6px}
.show-on-phone .sub-menu .menu-item a {display:block; /*v1.1*/ margin-bottom:6px; background-color:#747373; color:#FFF; padding:0px; padding-left:45px; margin:0px; background-image:url(../images/sprite-norepeat.png); background-repeat:no-repeat;}
.show-on-phone .sub-menu .cleaning.menu-item a {background-position:-450px 0px;}
.show-on-phone .sub-menu .innovative.menu-item a {background-position:-450px -50px;}
.show-on-phone .sub-menu .cosmetics.menu-item a {background-position:-450px -50px;}
.show-on-phone .sub-menu .beverage.menu-item a {background-position:-450px -100px;}
.show-on-phone .sub-menu .healthcare.menu-item a {background-position:-450px -150px;}
.show-on-phone .sub-menu .menu-item a:hover,
.show-on-phone .sub-menu .menu-item.current-menu-item a { background-color:#888B94; }
/* FOOTER */
.footer-wrapper {background:#EBEBEB /*url(img/footer-bg.jpg) no-repeat top center*/; padding-top:10px; padding-bottom:10px;}
.footer-content .title { padding-left:4px; font-size:13px; font-weight:700; text-transform:uppercase}
.footer-content .border { padding-bottom:8px; border-bottom:1px solid #B7BCC7;}
.footer-content a.hover { display:block; padding:8px 4px; border-bottom:1px solid #B7BCC7; color:#757373; font-size: 13px}
.footer-content a.hover:hover { background:#7C9BBB; color:#FFF}
.footer-content .baseline {font-size:11px; line-height:13px; color:#757373; text-transform:uppercase; margin:18px 0 11px 0}
.footer-content .contact-us {color:#F20F7A; margin-top:18px}
.footer-content .follow-us {color:#757373; margin-top:10px}
.footer-content .services {color:#68C1BF; margin-top:18px}
.footer-content .products {color:#72D0EC; margin-top:18px}
.subfooter-wrapper {background:#7C9BBB ;}
.subfooter-wrapper p, .subfooter-wrapper a {font-size:11px; line-height:23px;/* =hauteur bg */ font-weight:300; color:#FFF}
.subfooter-wrapper a:hover {text-decoration:underline}
/* HOME */
/* Accroche au dessus du slider */
.accroche-wrapper { background:#7C9BBB; padding-top:15px; padding-bottom:15px}
.accroche-content h1 { font-weight:300;color:#fff; text-transform:uppercase; letter-spacing:0.02em; text-indent:2em}
.accroche-content h2 { font-weight:300;color:#fff; letter-spacing:0.02em; text-indent:2em}
.accroche-content span {color:#FFF;}
/* slider*/
.slider-wrapper {background:url(../images/slider-bg-v2.jpg) no-repeat center center; padding:10px 0px 0px 0px; width:100%; height:483px; border-top:1px solid #CCC; }
.liquid-and-powder {font-size:16px; color:#656565; text-align:center}
.patented {padding-top:7px; font-size:14px; text-transform:uppercase; text-align:center; font-weight:700; letter-spacing:5px; color:#C00}
.slide {position:relative; text-align:right;}
/*
.slide-txt { position:absolute; top:30%; z-index:2; padding-left:40px; font-size:30px; line-height:40px; text-align:left}
.slide1 .slide-txt {color:#efa912}
.slide2 .slide-txt {color:#669c7f}
.slide3 .slide-txt {color:#d14e4d}
.slide4 .slide-txt {color:#3863aa}
.slide-img {padding-right:20px}
*/
/* Product bar */
.product-cta-wrapper {background:#7C9BBB ; }
.product-cta-item {display:block;position:relative; float:left; width:220px; padding:15px 10px; font-size:13px; font-weight:600; color:#FFF;}
.home .product-cta-item { width:180px; padding-left:50px; color:#FFF;}
.product-cta-item.cleaning { background:#72D0EC; } .product-cta-item.cleaning.current-item, .product-cta-item.cleaning:hover {background:#4EC5E7 }
.product-cta-item.innovative { background:#68C1BF; } .product-cta-item.innovative.current-item, .product-cta-item.innovative:hover {background:#42A19B}
.product-cta-item.cosmetics { background:#68C1BF; } .product-cta-item.cosmetics.current-item, .product-cta-item.cosmetics:hover {background:#42A19B}
.product-cta-item.beverage { background:#8AC7A5; } .product-cta-item.beverage.current-item, .product-cta-item.beverage:hover {background:#70BA92}
.product-cta-item.healthcare { background:#E76B8D; } .product-cta-item.healthcare.current-item, .product-cta-item.healthcare:hover {background:#E14873}
.product-cta-item .sprite {position:absolute}
.product-cta-item .txt {padding-left:50px}
.home .product-cta-item .txt {line-height:46px}
.home .product-cta-item .txt2 {line-height:15px}
/* Phrase ss product bar */
.attractive-concept-wrapper {padding-top:30px; padding-bottom:50px; text-align:center}
.attractive-concept-title {font-size:25px; color:#7C9BBB}
.attractive-concept-bloc { display:block; margin:25px auto 0px auto; padding:10px; background:#7C9BBB; font-size:20px; font-weight:300; color:#FFF; }
/* CTA services-performance-technology */
.cms-video-wrapper {padding-bottom:20px}
a.cms-cta-bloc { display:block; float:left; margin-left:2%; width:30%; padding:5% 1%; text-align:center; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;}
a.cms-cta-bloc:first-child { margin-left:0%;}
a.cms-cta-bloc.services { background:#F04F8C}
a.cms-cta-bloc.eco-performance { background:#68C1BF}
a.cms-cta-bloc.dosing-technology { background:#72D0EC}
a.cms-cta-bloc.services:hover { background:#F20F7A}
a.cms-cta-bloc.eco-performance:hover { background:#42A19B}
a.cms-cta-bloc.dosing-technology:hover { background:#16B3E7}
.cms-cta-bloc-txt { height:40px; font-size:13px; font-weight:700; color:#FFF; }
.cms-cta-bloc-button { display:inline-block; margin:0 auto; padding:11px 22px; background:#FFF; font-size:11px;}
.services .cms-cta-bloc-button { color:#C53E83}
.eco-performance .cms-cta-bloc-button { color:#68C1BF}
.dosing-technology .cms-cta-bloc-button { color:#5694B9}
/* Bloc news */
.news-wrapper { margin-bottom:20px; min-height:242px !important; width:/*70%*/; background:#EBEBEB; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;}
.news-title {font-size:16px; font-weight:700; color:#F20F7A}
.news-excerpt {font-size:14px; line-height:22px; color:#44485b}
.news-wrapper .bx-wrapper {position:relative; padding:65px 20px 10px 20px}
.news-wrapper .bx-prev,
.news-wrapper .bx-next { display:block; position:absolute; width:25px; height:25px; z-index:50; background-image:url(../images/sprite-norepeat.png); background-repeat: no-repeat ; cursor:pointer; text-indent:-9999px;}
.news-wrapper .bx-prev { background-position:0px -330px; top:20px; left:20px }
.news-wrapper .bx-next { background-position:-30px -330px; top:20px; left:52px }
.news-wrapper .bx-prev:hover { background-position:0px -360px; }
.news-wrapper .bx-next:hover { background-position:-30px -360px; }
/* Vidéo */
.video-wrapper {padding-bottom:40px}
.video-link { display:block;}
.show-on-tablet-and-phone.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;}
.show-on-tablet-and-phone.video-container iframe,
.show-on-tablet-and-phone.video-container object,
.show-on-tablet-and-phone.video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
/* PRODUCT */
.page-title-wrapper{background:#7C9BBB; margin-bottom:20px; }
.page-title-txt { padding:15px 0px; font-weight:300; color:#FFF; position:relative; z-index:2; text-indent:2em}
.page-product .page-title-txt { padding:20px 0px; text-align:left; color:#000;}
.gif-content {margin-top:20px; position:relative;}
.gif.responsive {display:block; position:relative; z-index:1; margin:0px auto; padding-bottom:70px; -moz-box-sizing: border-box; box-sizing: border-box; height: auto;}
.txt-devant-gif-anime {position:absolute; z-index:2; top:40%; width:100%; text-align:center;}
.s_Ul{width:6240px;height:auto;overflow:hidden;/*background:#4cff00;*/ position:relative;left:0;float:left;z-index:222;}
.s_Ul li{width:390px;height:186px;float:left;z-index:555;position:relative;}
.s_Ul li img{width:390px;height:186px;}
#s_Dv{height:243px;border:1px solid #fff; margin:0px auto;border-radius: 5px;left:0;z-index:222; background:#EBEBEB;}
#s_Div2
{
width:390px;
height:186px;
overflow:hidden;
margin: 58px auto;
}
#s_Asp
{
width: 81px;
height: 31px;
position:absolute;
margin-top: 5px;
margin-left: 5px;
z-index:555;
/*background:#ff6a00;*/
}
.s_Sp1
{
width: 40px;
height: 29px;
background:url(../images/sprite-norepeat_02.png) 8px no-repeat;
display:block;
float:left;
z-index:555;
}
.s_Sp2
{
width: 40px;
height: 29px;
background:url(../images/sprite-norepeat_04.png) 8px no-repeat;
display:block;
float:left;
z-index:555;
}
.s_odiv
{
width:20px;
height:20px;
background:#F20F7A;
}
#s_Hp
{
z-index: 99889;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
width:100%;
height:100%;
background:#000;
opacity:0.9;
filter:alpha(opacity=40);
display:none;
}
.s_hu
{
z-index: 99999999;
position:fixed;
width:850px;
height:500px;
display:none;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin:auto;
/*background:#F20F7A;*/
}
.s_hu a
{
display:block;
position:absolute;
width:50px;
height:50px;
top:-50px;
left:1000px;
background:url(../images/controls.png) -100px 2px no-repeat;
}
.s_hu p video
{
width:850px;
height:500px;
display:block;
margin:0 auto;
z-index:5552555;
}
#s_Dv{}
#s_Div2{width: 255px;height:auto;}
.s_Ul li{width: 255px;height:auto;}
.s_Ul li img{width:255px;height:auto;}
/* RESPONSIVE
* pour les largeur d'écran < à 800px
* mode "portrait" pour tablette
/------------------------------------------------- */
@media only screen and (max-width: 940px), only screen and (max-device-width: 940px)
{
/* general */
.show-on-desktop-and-tablet, .show-on-tablet, .show-on-tablet-and-phone {display:block !important;}
.show-on-desktop, .show-on-phone, .show-on-desktop-and-phone {display:none !important;}
/* Col */
.col3 dd {float:none; width:100% !important; margin-bottom:30px; margin-left:0 !important; clear:left !important;}
/* Home */
.accroche-content h1,
.accroche-content h2 { font-size:30px; line-height:35px; color:#fff; letter-spacing:0.02em; text-align:center;}
.slider-wrapper {height:auto !important}
.slide-txt { max-width:320px; padding-left:0px; font-size:27px; line-height:33px;}
.slide-img { width:450px !important; height:337px !important; padding-right:0px; }
.bx-pager { position:absolute; bottom:20px; left:10px; padding-left:0px;}
.bx-pager-link { margin-right:16px}
.product-cta-item { width:162px; padding:22px 10px; min-height:78px;}
.home .product-cta-item { width:155px; padding-left:15px;min-height:1px; margin: 10px 4px;}
.attractive-concept-wrapper { padding-top:20px; padding-bottom:20px;}
.attractive-concept-title { font-size:20px;}
.attractive-concept-bloc { padding:8px; font-size:18px; }
.news-wrapper {min-height:233px !important;}
/* product - cms page */
.gif.responsive {}
.s_hu p video { width:100%; height:200px}
.s_hu{width:100%; height:200px}
}
/* RESPONSIVE
* pour les largeur d'écran < à 600px
* mode "landscape" pour anciens smartphones
* mode "portrait" pour smartphones récents
/------------------------------------------------- */
@media only screen and (max-width: 695px), only screen and (max-device-width: 695px)
{
/* général */
.show-on-phone, .show-on-desktop-and-phone, .show-on-tablet-and-phone {display:block !important;}
.show-on-desktop, .show-on-desktop-and-tablet, .show-on-tablet {display:none !important;}
/* Col */
.col2 dd, col3 dd {float:none; width:100% !important; margin-bottom:10px; margin-left:0 !important; clear:left !important;}
/* Form */
input[type="submit"] {width:100%; padding:10px 0;}
/* Home */
.attractive-concept-wrapper { padding-top:30px; padding-bottom:30px}
.accroche-content h1,
.accroche-content h2 { font-size:22px; line-height:29px;}
.home .accroche-wrapper { height:auto !important;}
.slide-txt { position:relative; top:0px; max-width:none; font-size:22px; line-height:26px; text-align:center;}
.slide-img { float:none; display:block; margin-top:20px; width:300px !important; height:225px !important;}
.product-cta-item { padding:12px 6px; width:130px; margin:0 4px; min-height:90px; font-size:12px}
.home .product-cta-item { width:130px; padding:12px 6px; min-height:46px; margin: 10px 4px;}
.news-wrapper {min-height:1px !important; width:100%; margin:0}
.footer-content .col4 dd { float:left; width:98% !important; min-height:210px; margin-bottom:0px;}
.footer-content .col4 dd.col3 { margin-left:0% !important;}
.news-wrapper {min-height:210px !important;}
.video-wrapper {margin-bottom:20px !important}
/* product - cms page */
.gif.responsive { }
.wp-content {padding:20px 0px}
.page-title-txt {padding:10px 0px; font-size:24px;}
.page-product .page-title-txt {padding:0px 0px 10px 0px}
.gif.responsive {padding-bottom:0px;}
.txt-devant-gif-anime {position:absolute; z-index:2; top:30%; width:100%; padding-left:0 !important; text-align:center;}
.s_hu p video { width:100%; height:200px}
.s_hu{width:100%; height:200px}
}
/* DEBUG IE8
/-------------------------------------------*/
/* DEBUG IE7
/-------------------------------------------*/
/* inline-block fix */
#ie7 .attractive-concept-bloc,
#ie7 .cms-cta-bloc-button {display:inline; zoom:1}
/* Col */
.col4 dd { width:23.30%; }
/* Spécifique */
.alert-ie { display:block; width:100%; padding:1%; background-color:#FF9; color:#000; font-family: 'microsoft yahei',Arial, Helvetica, sans-serif; font-size:12px; line-height:18px; text-align:center; border-bottom:2px solid #FC0; border-top:2px solid #FC0}
#ie7 .header-wrapper {position:relative; z-index:2}
#ie7 .menu-item {display:block; float:left; zoom:1}
#ie7 .slide-txt {left:0px}
#ie7 a.cms-cta-bloc {width:29.8%}
.pagination{padding-left:0;margin:10px 0;-moz-border-radius:3px;border-radius:3px}
.pagination:after,.pagination:before{content:" ";display:table}.label,.pager li,.pagination>li{display:inline}
.pagination>li>a,.pagination>li>span{position:relative;float:left;padding:4px 8px;line-height:1.42857143;text-decoration:none;color:#666;background-color:#fff;border:1px solid #e4e4e4;margin-right:5px}
.close,.pager .next>a,.pager .next>span{float:right}
.pagination>li:first-child>a,.pagination>li:first-child>span{margin-left:0;-moz-border-radius-bottomleft:3px;border-bottom-left-radius:3px;-moz-border-radius-topleft:3px;border-top-left-radius:3px}
.pagination>li:last-child>a,.pagination>li:last-child>span{-moz-border-radius-bottomright:3px;border-bottom-right-radius:3px;-moz-border-radius-topright:3px;border-top-right-radius:3px}
.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover{z-index:2;color:#f60;background-color:#fff;border-color:#f60}
.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{z-index:3;color:#f60;background-color:#fff;border-color:#f60;cursor:default}
.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover{color:#777;background-color:#fff;border-color:#e4e4e4;cursor:not-allowed}
.pagination-lg>li>a,.pagination-lg>li>span{padding:10px 16px;font-size:18px;line-height:1.3333333}
.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span{-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px}
.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span{-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px}
.pagination-sm>li>a,.pagination-sm>li>span{padding:5px 10px;font-size:12px;line-height:1.5}
.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span{-moz-border-radius-bottomleft:2px;border-bottom-left-radius:2px;-moz-border-radius-topleft:2px;border-top-left-radius:2px}
.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span{-moz-border-radius-bottomright:2px;border-bottom-right-radius:2px;-moz-border-radius-topright:2px;border-top-right-radius:2px}
.pager{padding-left:0;margin:20px 0;list-style:none}.pager li>a,.pager li>span{display:inline-block;padding:5px 14px;background-color:#fff;border:1px solid #e4e4e4;-moz-border-radius:15px;border-radius:15px}
.pager li>a:focus,.pager li>a:hover{text-decoration:none;background-color:#fff}
.pager .previous>a,.pager .previous>span{float:left}
.pager .disabled>a,.pager .disabled>a:focus,.pager .disabled>a:hover,.pager .disabled>span{color:#777;background-color:#fff;cursor:not-allowed}
.label{padding:.2em .6em .3em;font-size:75%;line-height:1;color:#fff;white-space:nowrap;vertical-align:baseline;-moz-border-radius:.25em;border-radius:.25em}
a.label:focus,a.label:hover{color:#fff;text-decoration:none;cursor:pointer}.label:empty{display:none}.btn .label{position:relative;top:-1px}