@charset "UTF-8";
/* CSS Document */

@font-face {
	font-family: 'Din-regular';
	src: url('../fonts/din-regular.eot');
	src: url('../fonts/din-regular.eot?#iefix') format('embedded-opentype'), 
	url('../fonts/din-regular.woff') format('woff'), 
	url('../fonts/din-regular.ttf') format('truetype'), 
	url('../fonts/din-regular.otf') format('opentype'),
	url('../fonts/din-regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Din-black';
	src: url('../fonts/din-black.eot');
	src: url('../fonts/din-black.eot?#iefix') format('embedded-opentype'), 
	url('../fonts/din-black.woff') format('woff'),
	url('../fonts/din-black.ttf') format('truetype'),
	url('../fonts/din-regular.otf') format('opentype'),
	url('../fonts/din-black.svg') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family:'Irregularis';
	src: url('../fonts/Irregularis_gdi.eot');
	src: url('../fonts/Irregularis_gdi.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Irregularis_gdi.woff') format('woff'),
		url('../fonts/Irregularis_gdi.ttf') format('truetype'),
		url('../fonts/Irregularis_gdi.otf') format('opentype'),
		url('../fonts/Irregularis_gdi.svg#Irregularis-Regular') format('svg');
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0020-2265;
}

body, html { width:100%; height:100%; }

body { font-family:'Din-regular', Arial, sans-serif; font-size:16px; color:#666666; }

* { margin:0; padding:0; line-height:20px; }
a { outline:0; color:#01859a; text-decoration:none; }
img { border:none; max-width:100%; }

.clear { clear:both; }
.blue { color:#01859a; }
.green { color:#659532; }
.grey { color:#666666; }
.tabOnly { display:none; }

/* General */
#wrapper { width:100%; padding-top:90px; background:url(../img/bg-gradient.png) repeat-x left top;  }
.wrapperLarge { width:100%; padding:120px 0; }
.content { width:950px; margin:0 auto; position:relative; }
.colLeft { float:left; width:450px; }
.colRight { float:right; width:450px; }
ul { margin:0 0 0 15px; }
/* Btn return top */
a.returnTop { display:block; position:fixed; right:40px; bottom:50px; z-index:1000; width:70px; height:70px; color:#ffffff; font-family:'Din-black', Arial, sans-serif; text-decoration:none; border:none; }
a.returnTop .main-returnTop { position:absolute; text-align:center; width:70px; height:70px; display:flex; z-index:1005; border:2px solid #ffffff; border-radius:50px; }
a.returnTop .main-returnTop svg { width:34px; fill:currentColor; color:#fff; margin:0 auto 3px auto; }
a.returnTop .bg-returnTop { position:absolute; background:#666; border:2px solid #666; width:70px; height:70px; opacity:0.3; z-index:1002; border-radius:50px; }
a.returnTop:hover .bg-returnTop { opacity:0.8; background:#01859a; border:2px solid #01859a; transition-duration: 0.5s; }
/* Titles */
h1 { font-family:'Irregularis', Arial, sans-serif; font-size:66px; line-height:70px; font-weight:normal; text-align:center; padding:0 0 45px 0; letter-spacing: 0.8px; }
h1 span, h1 br { font-size:40px; }
h2 { font-family:'Irregularis', Arial, sans-serif; font-size:40px; line-height:38px; font-weight:normal; text-align:left; padding:0 0 15px 0; letter-spacing: 0.6px; }
h2 span, h2 br { font-size:28px; }
h3 { font-family:'Irregularis', Arial, sans-serif; font-size:28px; line-height:30px; font-weight:normal; text-align:left; padding:0 0 15px 0; letter-spacing: 0.6px; }
/* --- Header --- */
#wrap-header { width:100%; height:90px; background:#ffffff; position:fixed; top:0; z-index:50000; }
header { padding:12px 0 0 0 !important; }
header.content { width:96%; margin:0 auto; }
a#logo-cleanbox { width:206px; float:left; }
#shadow { width:100%; height:5px; background:url(../img/header-bg.png) repeat-x left top; position:absolute; left:0; bottom:-5px; }
/* nav */
ul.nav { float:right; list-style:none; margin:0; }
ul.nav li { float:left; padding:3px 18px 0 18px; }
ul.nav li:last-child { padding:0; }
ul.nav li a { text-align: center; }
ul.nav li .iconNav { width:100%; height:24px; display:block; }
ul.nav li .iconNav svg { width:24px; height:24px; vertical-align: -0.15em; fill:currentColor; stroke:2%; color:#cccccc; overflow:hidden; }
ul.nav li p { display:table-cell; text-align:center; vertical-align:middle; height:36px; font-family:'Din-black', Arial, sans-serif; font-size:12px; line-height:13px; color:#cccccc; }
ul.nav li:hover .iconNav svg, ul.nav li:hover p { color:#659532; }
ul.nav li.btn-autres-produits { position:relative; }
ul.nav li.btn-autres-produits a { display:inline-block; background:#2291a4; color:#fff; margin-top:-5px; padding:5px; border-radius:4px; }
ul.nav li.btn-autres-produits a:hover { background:#005864; }
ul.nav li.btn-autres-produits a p { color:#fff; }
ul.nav li.btn-autres-produits a .iconNav svg { color:#fff; }
ul.nav li.btn-autres-produits ul { display:none; position:absolute; right:0; margin:0; padding:6px 0; list-style: none; background:#fff; z-index:60000; border-bottom:4px solid #005864; }
ul.nav li.btn-autres-produits:hover ul { display:block; margin:0; padding:15px 20px 10px 20px; }
ul.nav li.btn-autres-produits ul li { float:none; text-align: center; margin:0; padding:0; }
ul.nav li.btn-autres-produits ul li a { background:none; color:#2291a4; font-size:16px; padding:10px; }
ul.nav li.btn-autres-produits ul li a:hover { background:none; color:#005864; }
ul.nav li.btn-sav a { display:inline-block; border:1px solid #2291a4; color:#2291a4; margin:-2px 0 0 -8px; padding:4px 10px; border-radius:4px; }
ul.nav li.btn-sav a svg, ul.nav li.btn-sav a p { color:#2291a4; }
ul.nav li:hover.btn-sav a { border:1px solid #659532; }
ul.nav li:hover.btn-sav p { color:#659532; }
/* navigation for mobile */
#btn-nav-mob { display:none; }
#zoneNavMob { display:none; margin:-1000px 0 0 -10000px; }

/* -- Cookies banner ---*/
#cookie-banner-message { background-color:#cbc6c4; text-align:center; padding:5px; font-size:12px; position:fixed; top:90px; z-index:1000; width:100%; }
a.cookie { text-decoration:underline; cursor:pointer; }
button.cookie { text-decoration:none; background-color:#2291a4; border:none; padding:0 10px; margin:0 10px; color:#fff; border-radius:2px; cursor:pointer; }

/* === EVENT (bannières) === */
#popup { position:fixed; top:0; left:0; width:100%; height:100%; z-index:50100; }
#popup #bg-popup { position:absolute; top:0; left:0; width:100%; height:100%; background-color: #000; opacity: 0.3; z-index:50150; cursor: pointer; }
#popup #wrap-event { position:absolute; top:20%; left:0; min-height:auto; padding:0; background-color:none; z-index:50200; }
#popup #event { padding:1px 0 0 0; }
#popup #bannerEvent { position:relative; margin-top:30px; background:#fff; border-radius:20px; padding:20px; box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.3); }
#popup #bannerEvent .partenariatCodiv { float:left; width:73.25%; }
#popup #bannerEvent .logo-fondationHopitaux { float:left; width:26.75%; }
#popup #bannerEvent .partenariatUICN { float:left; width:68.62%; }
#popup #bannerEvent .logo-UICN { float:left; width:31.38%; }
/* Btn return top */
#popup a.close-popup { display:block; position:absolute; top:-18px; right:-6px; z-index:50250; width:30px; height:30px; color:#ffffff; border:none; }
a.close-popup .main-closePopup { position:absolute; text-align:center; width:100%; height:100%; display:flex; z-index:50270; border:5px solid #ffffff; background-color:#fff; border-radius:50px; }
a.close-popup .main-closePopup svg { width:20px; fill:currentColor; color:#666; margin:0 auto; }
a.close-popup:hover .main-closePopup svg { color:#000; }
	
/* === ACCUEIL === */
#wrap-accueil { min-height:810px; padding:0; }
#accueil { padding:0; }

/* === EFFICACITE PROUVE === */
#wrap-presentation { }
#presentation h1, #presentation h2, #presentation p, #presentation ul { color:#666666; }
.pres-img1 { margin:25px 0 70px 0; }
#presentation .encadre { position:relative; margin:30px 0 35px 0; background-color: #ffce44; border-radius:10px; padding:40px 25px 30px 25px; text-align:center; }
#presentation .encadre center { width:100%; position:absolute; top:-40px; left:0; }
#presentation .encadre center img { width:82px; }
#presentation ul li { padding:0 0 1em 0; }
#presentation .pictos-Qualite { width:100%; padding:10px 0 30px 0; }
#presentation .pictos-Qualite .pictos { float:left; width:33.33%; text-align: center; font-family:'Din-regular', Arial, sans-serif; font-weight: bold; font-size:16px; line-height: 18px; color:#01859a; text-transform: uppercase; }
#presentation .pictos-Qualite .pictos p { color:#01859a; }
#presentation .normes { margin:30px 0 0 0; padding:12px 0 15px 0; border-top:1px solid #666; border-bottom:1px solid #666; }
#presentation .normes b { display: inline-block; padding-bottom:6px; }

/* === SIMPLE D'UTILISATION === */
#wrap-utilisation { background:#659532; }
#utilisation h1, #utilisation h2, #utilisation p, #utilisation ul { color:#ffffff; }
#utilisation { background-image:url(../img/util-bg.jpg); background-repeat: no-repeat;  background-position: center bottom; background-size: 950px; min-height:1050px; }
#utilisation .colLeft article { padding-right:110px; }
#utilisation .colRight article { padding-left:120px; }
#utilisation .img-title { margin-bottom:15px; }
#utilisation .img-bottom { margin-top:15px; }
#util-1 { margin-top:80px; }
#util-2 { margin-top:10px; }
#util-3 { margin-top:50px; }
#util-4 { margin-top:80px; }

/* === 100% PERSONNALISABLE === */
#wrap-personnalisable { background:#01859a; }
#personnalisable h1, #personnalisable h2, #personnalisable p, #personnalisable ul { color:#ffffff; }
#personnalisable .wider { width:530px; }
#perso { text-align:center; margin-top:30px; }
#perso h2, #perso p { text-align:center; }
p#perso-text { display:inline-block; width:100%; margin-top:35px; text-align:center; }
p#perso-text-mob { display:none; }
ul#showPerso { float:left; list-style:none; margin:0; }
ul#showPerso li { float:left; width:88px; height:162px; cursor:pointer; }
ul#showPerso li .selected { border:6px solid #4dabb8; width:76px; height:150px; position:absolute; }
#options { margin-top:30px; }
#options .col-1-4 { float:left; width:16%; margin:2%; padding:2%; text-align: center; }
#options.cleanbox { width:50%; margin:30px auto 0 auto; display: flex; }
#options.cleanbox .col-1-4 { background:#4dabb8; width:38%; }
#options .col-1-4#opt-lingette img { margin:24px 0 0 0; }
#options .col-1-4#opt-lingette p { margin:0 0 24px 0; }
#options .col-1-4#opt-poubelle img { margin: 0 0 6px 0; }
#options .col-1-4#opt-poubelle p { margin:6px 0 0 0; }
#options.sunbox { width:40%; margin:30px auto 0 auto; display: flex; }
#options.sunbox .col-1-1 { float:left; background:#0062a0; width:100%; margin:2%; padding:8%; text-align: center; }
#options.sunbox .col-1-1 b { display:inline-block; padding-bottom:10px; color:#f5a914; }
.col-1-3 { float:left; width:27%; margin:1%; padding:2%; text-align: center; }

/* SUPER FLUIDE SLIDER */
/* Global Variables */
:root {
      /* Tile Dimensions */
      --carousel-tile-spacing: 4px;
      --carousel-tile-width:   82px;
	  --carousel-tile-height: 275px;
      /*--carousel-tile-height:  calc(var(--carousel-tile-width) / (16 / 9));*/

      /* Growth Factor */
      --carousel-growth-factor: 1.4;

      /* Fade to Opacity */
      --carousel-fade-opacity: 1;
      --carousel-normal-opacity: 1;

      /* Automatic Offsets - DO NOT ALTER */
      --carousel-offset-left:  calc(-1 * (var(--carousel-tile-width) * (var(--carousel-growth-factor) - 1) / 2));
      --carousel-offset-right: calc(var(--carousel-tile-width) * (var(--carousel-growth-factor) - 1));

      /* Transition Speeds */
      --carousel-transition-1: 0.8s;
      --carousel-transition-2: 0.4s;
      --carousel-transition-3: 0.2s;
}

/* Carousel Container */
.carousel {
      margin: 0;
      box-sizing: border-box;
      width: 100%;
	  height:420px;
	  padding:6px 0 0 0;
      overflow-x: auto;
      overflow-y: hidden;
	background: url("../img/bg-carousel.jpg") no-repeat center top;
}

/* Carousel Row */
.carousel-row {
      white-space: nowrap;
      margin-top: calc((var(--carousel-tile-height) * (var(--carousel-growth-factor) - 1)) / 2);
      margin-bottom: calc((var(--carousel-tile-height) * (var(--carousel-growth-factor) - 1)) / 2);
      margin-left: calc((var(--carousel-tile-width) * (var(--carousel-growth-factor) - 1)) / 2);
      margin-right: calc((var(--carousel-tile-width) * (var(--carousel-growth-factor) - 1)) / 2);
      transition: var(--carousel-transition-2);
}

/* Content Tile */
.carousel-tile {
      position: relative;
      display: inline-block;
      width: var(--carousel-tile-width);
      height: var(--carousel-tile-height);
      margin-right: var(--carousel-tile-spacing);
      transition: var(--carousel-transition-2);
      -webkit-transform-origin: center left;
      transform-origin: center left;
      cursor: pointer;
      cursor: hand;
}

/* Add Extra Margin to Last Carousel Tile */
.carousel-tile:last-of-type {
      margin-right: calc(var(--carousel-tile-width)/2);
}

/* Ensure All Elements Inside Tile are Block */
.carousel-tile * {
      display: block;
}

/* Carousel Row on Hover */
.carousel-row:hover {
      -webkit-transform: translate3d(var(--carousel-offset-left), 0, 0);
      transform: translate3d(var(--carousel-offset-left), 0, 0);
}

/* Content Tile on Carousel Row Hover */
.carousel-row:hover .carousel-tile {
      opacity: var(--carousel-fade-opacity);
}

/* Content Tile on Hover on Carousel Row Hover */
.carousel-row:hover .carousel-tile:hover {
      -webkit-transform: scale(var(--carousel-growth-factor));
      transform: scale(var(--carousel-growth-factor));
      opacity: var(--carousel-normal-opacity);
}

/* Content Tile on Hover */
.carousel-tile:hover ~ .carousel-tile {
      -webkit-transform: translate3d(var(--carousel-offset-right), 0, 0);
      transform: translate3d(var(--carousel-offset-right), 0, 0);
}



/* === ADAPTEE A VOS BESOINS === */
#wrap-adaptee { background:url(../img/bg-gradient.png) repeat-x left top; }
#adaptee h1, #adaptee h2, #adaptee p, #adaptee ul { color:#666666; }
#adaptee h1 { line-height:54px !important; }
#adaptee {  }
#adaptee .adapt-illus { text-align: center; margin-top:-10px; }
#adaptee .adapt-illus img { width:380px; }
#adaptee .colLeft, #adaptee .colRight { margin-bottom:0; }
#entreprise { margin-bottom:40px; }
#restau { margin-bottom:40px; }
#sante h1, #sante h2, #sante h3, #sante p, #sante ul { color:#01859a; }
#restau h1, #restau h2, #restau h3, #restau p, #restau ul { color:#659532; }
#entreprise h1, #entreprise h2, #entreprise h3, #entreprise p, #entreprise ul { color:#66666; }
p.intro { margin-bottom:40px; text-align:justify; }
a.adapt-btn { display:block; border-radius:10px; padding:10px 0; text-align:center; font-size:15px; line-height:19px; cursor:pointer; }
a.ref-btn { float:left; width:236px; }
a.special-btn { float:right; width:194px; }
#sante a.adapt-btn { border:2px solid #01859a; color:#01859a; }
#sante a.active { background:#01859a; color:#ffffff; }
#restau a.adapt-btn { border:2px solid #659532; color:#659532; }
#restau a.active { background:#659532; color:#ffffff; }
#entreprise a.adapt-btn { border:2px solid #666666; color:#666666; }
#entreprise a.active { background:#666666; color:#ffffff; }
/* sous-parties REFerence */
.sousPartie { display:none; float:left; width:100%; margin:20px 0 30px 0; }
.sousPartie.bgRef { background:url(../img/adapt-bg-ref.png) no-repeat center 370px; }
.sousPartie ul.refNames { float:left; display:block; width:100%; list-style:none; margin:0; }
.sousPartie ul.refNames li { float:left; width:20%; display:block; text-align:center; font-size:13px; line-height:17px; }
.sousPartie ul.refNames li br { font-size:13px; line-height:17px; }
.sousPartie ul.refNames li img { width:70%; }
p.refNames-mob { display:none; }
.sousPartie .description { text-align:justify; }
/* sous-parties SPEcial */
.sousPartie .bgSpe { background:url(../img/adapt-bg-spe.png) no-repeat center 420px; }
.sousPartie .bgSpe { text-align: center; }
.sousPartie .bgSpe h3 { text-align: center; }
.sousPartie .bgSpe img { width:135px; margin:0 auto; }
.sousPartie .bgSpe { position:relative; }
.sousPartie .opt { position: absolute; left:-150px; width:260px; text-align: center; }
.sousPartie .opt1 { top:60px; }
.sousPartie .opt2 { top:170px; }
.sousPartie .opt3 { top:340px; }
.sousPartie  svg { width:20px; position:absolute; top:2px; }
.sousPartie  svg.flechR { right:0; }
.sousPartie  svg.flechL { left:0; transform: rotate(180deg); }
.sousPartie .bgSpe.cb .opt { display:none; }
/* sous-parties ENTREPRISE */
#entreprise-special { display:none; float:left; width:100%; }
#entreprise-special.sousPartie .bgSpe svg { fill:currentColor; color:#666; }
/* sous-parties RESTAU */ 
#restau-special { display:none; float:left; width:100%; }
#restau-special.sousPartie .bgSpe svg { fill:currentColor; color:#649432; }
/* sous-parties SANTE */ 
#sante-special { display:none; float:left; width:100%; }
#sante-special.sousPartie .bgSpe svg { fill:currentColor; color:#00869a; }


/* === REFERENCES === */
#wrap-references { background:url(../img/bg-gradient.png) repeat-x left top; }
#references h1, #references h2, #references p, #references ul { color:#666666; }
#references {  }
/* logos */
#references .wider { width:100%; }
ul#showRef-bornes { float:left; list-style:none; margin:0; }
ul#showRef-bornes li { float:left; width:12.5%; height:100px; }


/* === CONTACTEZ-NOUS === */
#wrap-contact { background:url(../img/contact-bg.png) repeat-x left bottom #01859a; }
#contact h1, #contact h2, #contact p, #contact ul { color:#ffffff; }
#coordonees { width:100%; text-align: center; padding:20px 0; background: #049eb5; border-radius: 5px; margin-bottom:50px; }
#coordonees p { display: inline-block; text-align: left; font-size:18px; line-height: 30px; }
#coordonees a { text-decoration:underline; color:#ffffff; }
#coordonees svg { width:75px; fill:currentColor; color:#01859a; vertical-align:text-bottom; margin-right:15px; }
#toutCompris {  }
#toutCompris img { width:22%; height:auto; float:left; margin:0 3% 0 0 ; }
#toutCompris .text { width:75%; float:left; }
#toutCompris .text p, #toutCompris .text ul, #toutCompris .text ul li, #toutCompris .text br { line-height: 18px !important; }
#toutCompris ul li { padding:10px 0 0 0; }
#toutCompris ul li b { color:#fbba00; }
#toutCompris .text p span { text-transform: uppercase; }
/* Formulaire */
form#contactForm { float:left; width:100%; }
form#contactForm p { float:left; width:100%; padding:0 0 20px 0; }
form#contactForm p span { float:left; margin-left:140px; font-size:14px; color:#fff200; }
form#contactForm label { float:left; width:140px; line-height:26px; }
form#contactForm input[type=text] { float:left; width:300px; height:26px; border:none; padding:0 0 0 3px; font-family:'Din-regular', Arial, sans-serif; font-size:16px; color:#666666; }
form#contactForm input[type=tel] { float:left; width:300px; height:26px; border:none; padding:0 0 0 3px; font-family:'Din-regular', Arial, sans-serif; font-size:16px; color:#666666; }
form#contactForm input[type=email] { float:left; width:300px; height:26px; border:none; padding:0 0 0 3px; font-family:'Din-regular', Arial, sans-serif; font-size:16px; color:#666666; }
form#contactForm textarea { float:left; width:300px; border:none; padding:0 0 0 3px; font-family:'Din-regular', Arial, sans-serif; font-size:16px; color:#666666; }
form#contactForm input[type=submit] { float:right; border:2px solid #ffffff; border-radius:5px; background:#01859a; padding:3px 6px; font-family:'Din-bold', Arial, sans-serif; font-size:15px; color:#ffffff; }
form#contactForm input[type=submit]:hover { background:#ffffff; color:#01859a; cursor:pointer; }

/* --- Footer --- */
#wrap-footer { padding:40px 0; }
#footer.content { width:96%; margin:0 auto; }
#footer h1, #footer h2, #footer p, #footer br { color:#01859a; line-height:17px; }
#socialLinks { display:none; margin:20px 0; padding:20px; background:#007285; color:#fff; border-radius: 5px; }
#socialLinks a { margin-left:15px; }
#footer p { text-align:center; font-size:13px; }
#footer p span { color:#666666; }
#footer p span a { color:#666666; text-decoration:underline; }


/* == MENTIONS LEGALES == */
.blue-bg { background:#01859a; }
#wrap-legals { background:url(../img/contact-bg.png) repeat-x left bottom #01859a; }
.wrapperLargeAnnexes { width:100%; padding:60px 0; }
#wrap-legals h1, #wrap-legals h2, #wrap-legals h3, #wrap-legals p, #wrap-legals ul { color:#ffffff; }
#wrap-legals h1 { font-size:40px; line-height:38px; }
#wrap-legals h2 { font-size:34px; line-height:32px; padding:40px 0 20px 0; }
#wrap-legals h3 { font-size:24px; line-height:28px; }
#wrap-legals p { padding:0 0 25px 40px; }
#wrap-legals p.noMargin { padding:0 0 25px 0; }
#wrap-legals ul { padding:0 0 25px 80px; }
#wrap-legals ul li { padding:0 0 15px 0; }
#wrap-legals a { color:#ffffff; text-decoration:underline; }


/* ==== CLEANDESK ==== */
a#logo-cleandesk { width:222px; height:36px; float:left; padding:6px 0 0 0 !important; }
#wrap-utilisation.cleandesk { background:#f59201; }
#wrap-utilisation.cleandesk #utilisation { background:url("../img/util-bg-cleandesk.jpg") no-repeat center bottom; background-size:100%; min-height:1270px; }
#wrap-utilisation.cleandesk article p, #wrap-utilisation.cleandesk article ul { margin-bottom:3em; }
#wrap-utilisation.cleandesk article p:last-child { margin-bottom:0; }
#wrap-utilisation.cleandesk #utilisation .shorter { width: 340px; }
#wrap-utilisation.cleandesk #util-1 { margin-top: 0; }
#wrap-utilisation.cleandesk #util-2 { margin-top: 60px; }
/* perso */
#wrap-personnalisable.cleandesk { background:#ea4e26; }
#wrap-personnalisable.cleandesk #personnalisable { background:url("../img/perso-bg-cleandesk.jpg") no-repeat center 80px; background-size:100%; min-height:300px; }
#wrap-personnalisable.cleandesk article#perso-1 { margin-top:340px; }
#options.cleandesk .col-1-4 { background:#eb603c; }
/* produits */
#wrap-produits { background:url(../img/bg-gradient.png) repeat-x left top; text-align:center; }
#produits h1, #produits h2, #produits p, #produits ul { color:#666666; }
#produits .colLeft, #produits .colRight, #produits .col-1-3 { margin-top:30px; }
#produits .colLeft p, #produits .colRight p, #produits .col-1-3 p { padding:30px 30px 50px 30px; }
#produits .colLeft a, #produits .colRight a, #produits .col-1-3 a { color:#666666; padding:10px 30px; border:2px solid #666; border-radius: 8px; font-size:18px; }
#produits .colLeft a:hover, #produits .colRight a:hover { color:#fff; background-color:#666; } 
/* contact */
#wrap-contact.cleandesk #coordonees { margin-bottom:20px; }
#wrap-contact.cleandesk #toutCompris { display:table-cell; vertical-align:middle; padding:0 140px 0 0 ; background:url(../img/contact-img-cleandesk.jpg) no-repeat right center; height:372px; }
#wrap-contact.cleandesk #toutCompris p, #toutCompris br { font-size:20px; line-height:26px; }

/* ==== SUNBOX ==== */
a#logo-sunbox { width:222px; height:36px; float:left; padding:6px 0 0 0 !important; }
#wrap-utilisation.sunbox { background:#0064a2; }
#wrap-utilisation.sunbox #utilisation { background:url("../img/util-bg-sunbox.jpg") no-repeat center bottom; background-size:100%; min-height:1270px; }
#wrap-utilisation.sunbox article p, #wrap-utilisation.sunbox article ul { margin-bottom:3em; }
#wrap-utilisation.sunbox article p:last-child { margin-bottom:0; }
#wrap-utilisation.sunbox #utilisation .shorter { width: 340px; }
#wrap-utilisation.sunbox #util-1 { margin-top: 0; }
#wrap-utilisation.sunbox #util-2 { margin-top: 60px; }
/* perso */
#wrap-personnalisable.sunbox { background:#2e95cb; }
#wrap-personnalisable.sunbox #personnalisable { background:url("../img/perso-bg-sunbox.jpg") no-repeat center 80px; background-size:78%; min-height:300px; }
#wrap-personnalisable.sunbox article#perso-1 { margin-top:340px; }
#options.sunbox .col-1-4 { background:#eb603c; }
/* produits */
#wrap-produits { background:url(../img/bg-gradient.png) repeat-x left top; text-align:center; }
#produits h1, #produits h2, #produits p, #produits ul { color:#666666; }
#produits .colLeft, #produits .colRight { margin-top:30px; }
#produits .colLeft p, #produits .colRight p { padding:30px 30px 50px 30px; }
#produits .colLeft a, #produits .colRight a { color:#666666; padding:10px 30px; border:2px solid #666; border-radius: 8px; font-size:18px; }
#produits .colLeft a:hover, #produits .colRight a:hover { color:#fff; background-color:#666; } 
/* contact */
#wrap-contact.sunbox #coordonees { margin-bottom:20px; }
#wrap-contact.sunbox #toutCompris { display:table-cell; vertical-align:middle; padding:0 140px 0 0 ; background:url(../img/contact-img-sunbox.jpg) no-repeat right center; height:372px; }
#wrap-contact.sunbox #toutCompris p, #toutCompris br { font-size:20px; line-height:26px; }


/* ==== CLEANUMBRELLA ==== */
a#logo-cleanumbrella { width:304px; height:36px; float:left; padding:6px 0 0 0 !important; }
#wrap-utilisation.cleanumbrella { background:#00b0eb; }
#wrap-utilisation.cleanumbrella #utilisation { background:url("../img/util-bg-cleanumbrella.jpg") no-repeat center bottom; background-size:100%; min-height:1200px; }
#wrap-utilisation.cleanumbrella article p, #wrap-utilisation.cleandesk article ul { margin-bottom:3em; }
#wrap-utilisation.cleanumbrella article p:last-child { margin-bottom:0; }
#wrap-utilisation.cleanumbrella #utilisation .shorter { width:340px; }
#wrap-utilisation.cleanumbrella #util-1 { margin-top: 0; }
#wrap-utilisation.cleanumbrella #util-2 { margin-top: 40px; text-align:right; }
#wrap-utilisation.cleanumbrella #util-2 h2 { text-align:right; }
/* perso */
#wrap-personnalisable.cleanumbrella { background:#014fa1; }
#wrap-personnalisable.cleanumbrella #personnalisable { background:url("../img/perso-bg-cleanumbrella.jpg") no-repeat center 80px; background-size:100%; min-height:460px; }
#wrap-personnalisable.cleanumbrella article#perso-1 { margin-top:340px; }
/* contact */
#wrap-contact.cleanumbrella #coordonees { margin-bottom:20px; }
#wrap-contact.cleanumbrella #toutCompris { display:table-cell; vertical-align:middle; padding:0 200px 0 0 ; background:url(../img/contact-img-cleanumbrella.jpg) no-repeat right center; height:289px; }
#wrap-contact.cleanumbrella #toutCompris p, #toutCompris br { font-size:20px; line-height:26px; }


/* ==== Page EVENT (UICN) ==== */
a#header-event { float:left; font-size:36px; line-height:73px; margin-right:20px; font-family:'Din-black', Arial, sans-serif; text-decoration:none; border:none; color:#09529c; }
a#logo-uicn { float:left; }
a#logo-uicn img { height:65px; }
#wrap-utilisation.event { background:#09529c; }
#wrap-utilisation.event #utilisation { background:url("../img/bg-uicn.jpg") no-repeat right 100px; background-size:100%; min-height:900px; }
#wrap-utilisation.event #util-1 p { width:80%; margin-bottom:1rem; }


/* ----- nav intermédiaire----- */
@media screen and (max-width: 1200px) {
	ul.nav li { float:left; padding:3px 13px 0 13px; }
}


/* ----- tablet ----- */
@media screen and (max-width: 1000px) {
	body { font-size:15px; }
	* { line-height:19px; }
	.tabOnly { display:inline-block; }
	/* General */
	.content { width:768px; }
	.colLeft { width:360px; }
	.colRight { width:360px; }
	/* Btn return top */
	a.returnTop { right:30px; bottom:30px; }
	/* titles */
	h1 { font-size:50px; line-height:60px; padding:0 0 60px 0; }
	h1 span, h1 br { font-size:30px; }
	h2 { font-size:34px; line-height:38px; padding:0 0 12px 0; }
	h2 span, h2 br { font-size:24px; }
	h3 { font-size:24px; line-height:26px; }
	/* --- Header --- */
	/* navigation for mobile */
	header.content { width:92%; }
	ul.navLarge { display:none; }
	#btn-nav-mob { display:block; float:right; margin:15px 0 0 0 ; width:42px; height:44px; cursor:pointer; }
	#btn-nav-mob svg { fill:currentColor; color:#ccc; }
	#zoneNavMob { display:none; width:100%; margin:0; border-bottom:4px solid #00869a; background:#ffffff; position:absolute; left:0; top:90px; }
	#zoneNavMob .content { width:300px; padding:0; }
	ul.nav { float:left; width:300px; padding:8px 0; margin:0; }
	ul.nav li { float:none; padding:8px 0; }
	ul.nav li:last-child { padding:8px 0; }
	ul.nav li .nav-icon { float:left; width:26px; height:24px; margin-right:17px; }
	ul.nav li .nav-text { display:table-cell; text-align:left; height:24px; font-size:15px; line-height:17px; }
	ul.nav li ul { padding:6px 0 0 30px; list-style:none; }
	ul.nav li ul li a { color:#ccc; font-size:16px; }
	ul.nav li ul li a:hover { color:#659532; }
	ul.nav li a { text-align: left; }
	ul.nav li .iconNav { width:24px; display: inline-block; margin-right:17px; float: left; }
	ul.nav li .iconNav svg { float:left; height:24px; overflow:hidden; }
	ul.nav li p { display:table-cell; text-align:left; height:24px; font-size:15px; line-height:17px; }
	ul.nav li:hover .iconNav svg, ul.nav li:hover p { color:#659532; }
	ul.nav li.btn-sav a { width:100%; margin:-2px 0 0 -12px; padding:10px; }
	/* === ACCUEIL === */
	#wrap-accueil { min-height:658px; }
	/* === PRESENTATION === */
	#presentation .encadre { margin-bottom:25px; padding:40px 20px 25px 20px; }
	/* === SIMPLE D'UTILISATION === */
	#utilisation { background-size:768px; min-height:930px; }
	#utilisation .colLeft article { padding-right:70px; }
	#utilisation .colRight article { padding-left:80px; }	
	#util-1 { margin-top:40px; }
	#util-2 { margin-top:0; }
	#util-3 { margin-top:40px; }
	#util-4 { margin-top:40px; }
	#utilisation .img-title { margin-bottom:5px; }
	/* === 100% PERSONNALISABLE === */
	#personnalisable .wider { width:474px; }
	ul#showPerso li { width:79px; height:145px; }
	ul#showPerso li .selected { width:67px; height:133px; }
	#options.cleanbox { width:60%; }
	/* === ADAPTEE A VOS BESOINS === */
	#adaptee h1 { line-height:42px !important; }
	a.adapt-btn { font-size:14px; line-height:18px; padding:5px 0; }
	a.special-btn { float:left; width:236px; margin-top:10px; }
	/* sous partie REFerence */
	.sousPartie { margin:20px 0 30px 0; }
	.sousPartie.bgRef { background:url(../img/adapt-bg-ref.png) no-repeat center 300px; background-size:768px; }
	/* sous-parties SPEcial */
	.sousPartie .bgSpe { background-size:340px; background-position: center 420px; }
	.sousPartie .opt { left:-130px; width:220px; }
	/* === REFERENCES === */
	#references { }
	/* logos */
	ul#showRef-bornes li { width:12.5%; height:80px; }
	/* === CONTACT === */
	#toutCompris img { width:26%; height:auto; float:left; margin:0 1% 0 0 ; }
	#toutCompris .text { width:73%; float:left; }
	
	/* ==== CLEANDESK ==== */
	#wrap-utilisation.cleandesk #utilisation { min-height:1100px; }
	#wrap-utilisation.cleandesk #utilisation .shorter { width: 290px; }
	/* perso */
	#wrap-personnalisable.cleandesk #personnalisable { background-size:768px !important; min-height:660px; background:url("../img/perso-bg-cleandesk.jpg") no-repeat center 60px; }
	#wrap-personnalisable.cleandesk article#perso-1 { margin-top:240px; }
	#options .col-1-4 { width:42%; margin:2%; padding:4% 2% 2% 2%; }
	/* contact */
	#wrap-contact.cleandesk #toutCompris { padding:0 100px 0 0 ; }
	
	/* ==== SUNBOX ==== */
	#wrap-utilisation.sunbox #utilisation { min-height:1100px; }
	#wrap-utilisation.sunbox #utilisation .shorter { width: 290px; }
	/* perso */
	#wrap-personnalisable.sunbox #personnalisable { background-size:768px !important; min-height:660px; background:url("../img/perso-bg-sunbox.jpg") no-repeat center 60px; }
	#wrap-personnalisable.sunbox article#perso-1 { margin-top:240px; }
	#options.sunbox { width:46%; }
	/* contact */
	#wrap-contact.sunbox #toutCompris { padding:0 100px 0 0 ; }
	
	/* ==== CLEANUMBRELLA ==== */
	#wrap-utilisation.cleanumbrella #utilisation { min-height:1040px; }
	#wrap-utilisation.cleanumbrella #utilisation .shorter { width:300px; }
	#wrap-utilisation.cleanumbrella #util-2 { margin-top:40px; }
	/* perso */
	#wrap-personnalisable.cleanumbrella #personnalisable { background-size:768px !important; min-height:660px; background:url("../img/perso-bg-cleanumbrella.jpg") no-repeat center 60px; }
	#wrap-personnalisable.cleanumbrella article#perso-1 { margin-top:240px; }
	/* contact */
	#wrap-contact.cleanumbrella #toutCompris { vertical-align:top; padding:0 0 320px 0 ; background:url(../img/contact-img-cleanumbrella.jpg) no-repeat center bottom; height:auto; }
    
    /* ==== EVENT (UICN) ==== */
    #wrap-utilisation.event #utilisation { min-height:720px; }
    #wrap-utilisation.event #util-1 p { width:100%; }
    
}

/* ----- mobile ----- */
@media screen and (max-width: 800px) {
	body { font-size:14px; }
	* { line-height:18px; }
	.tabOnly { display:none; }
	.noMob { display:none; }
	/* General */
	#wrapper { padding-top:0; /*background:url(../img/bg-gradient-mob.png) repeat-x left top;*/ }
	.wrapperLarge { padding:40px 0; }
	.content { width:300px; }
	.colLeft { width:300px; margin-bottom:30px; }
	.colRight { float:left; width:300px; }
	/* Btn return top */
	a.returnTop { right:20px; bottom:20px; width:56px; height:56px; }
	a.returnTop .main-returnTop { width:56px; height:56px; }
	a.returnTop .bg-returnTop { width:56px; height:56px; }
	/* titles */
	h1 { font-size:36px; line-height:40px; padding:0 0 30px 0; }
	h1 span, h1 br { font-size:20px; }
	h2 { font-size:26px; line-height:30px; padding:0 0 8px 0; }
	h2 span, h2 br { font-size:20px; }
	h3 { font-size:20px; line-height:24px; text-align:center; }
	/* --- Header --- */
	#wrap-header { height:76px; position:relative; }
	header { padding:15px 0 0 0; }
	a#logo-cleanbox { width:177px; height:43px; }
	/* navigation for mobile */
	#btn-nav-mob { margin:10px 0 0 0 ; }
	#zoneNavMob { top:76px; }
	/* -- Cookies banner ---*/
	#cookie-banner-message { top:75px; }
	/* === ACCUEIL === */
	#wrap-accueil { min-height:258px; }
	/* === EVENT (bannières) === */
	#popup #wrap-event { top:15%; }
	#popup #bannerEvent { border-radius:8px; padding:8px; text-align: center; }
	#popup #bannerEvent .partenariatCodiv { float:none; width:100%; }
	#popup #bannerEvent .logo-fondationHopitaux { float:none; width:55%; }
	/* Btn return top */
	#popup a.close-popup { top:-22px; right:30px; }
	
	/* === PRESENTATION === */
	.pres-img1 { margin:20px 0 30px 0; }
	#presentation .encadre { padding:35px 15px 25px 15px; margin-top:20px; }
	#presentation .encadre center { top:-24px; }
	#presentation .encadre center img { width:60px; }
	#presentation .pictos-Qualite .pictos, #presentation .pictos-Qualite .pictos p { font-size:12px; line-height: 14px !important; }
	#options.cleanbox { width:100%; }
	#options.cleanbox #opt-lingette img { width:80%; }
	#options.cleanbox #opt-poubelle img { width:90%; }
	/* === SIMPLE D'UTILISATION === */
	#utilisation { background:none; margin-bottom:30px; }
	#utilisation .colLeft article { padding-right:0; }
	#utilisation .colRight article { padding-left:0; }
	#util-1, #util-2, #util-3, #util-4 { margin-top:0; }
	#util-2, #util-4 { text-align:right; }
	#util-2 h2, #util-4 h2 { text-align:right; }
	/* === 100% PERSONNALISABLE === */
	#personnalisable .wider { width:300px; margin-top:460px; }
	p#perso-text { display:none; }
	p#perso-text-mob { display:inline-block; width:100%; margin-bottom:30px; text-align:center; }
	ul#showPerso li { width:50px; height:93px; }
	ul#showPerso li .selected { width:38px; height:81px; }
	/* === ADAPTEE A VOS BESOINS === */
	#wrap-adaptee { background:url(../img/bg-gradient-mob.png) repeat-x left top; }
	#adaptee .adapt-illus { margin-top:0; }
	#adaptee .adapt-illus img { width:220px; }
	#adaptee h1 { line-height:30px !important; }
	a.adapt-btn { font-size:13px; line-height:17px; }
	a.ref-btn { float:none; margin:0 auto; }
	a.special-btn { float:none; margin:10px auto 0 auto; }
	/* sous partie REFerences*/
	.sousPartie.bgRef { background:url(../img/adapt-bg-ref.png) no-repeat center 150px; background-size:300px; }
	.sousPartie ul.refNames li img { width:100%; }
	.sousPartie ul.refNames li p { display:none; }
	p.refNames-mob { display: inline-block; width:100%; padding-top:10px; text-align:center; line-height: 2em; }
	/* sous-parties SPEcial */
	.sousPartie .bgSpe { background-size:300px; background-position: center 310px; padding-bottom:30px; }
	.sousPartie .bgSpe img { width:100px; }
	.sousPartie .opt { left:0; width:180px; text-align: left; }
	.sousPartie .bgSpe .opt1 { top:40px; }
	.sousPartie .bgSpe .opt2 { top:125px; }
	.sousPartie .bgSpe .opt3 { top:250px; }
	.sousPartie .bgSpe.cb .opt { display:block; }
	.sousPartie .bgSpe { text-align: right; }
	.sousPartie .bgSpe h3 { padding-bottom:10px; }
	.sousPartie  svg.flechL { display:none; }
	/* === REFERENCES === */
	#wrap-references {  }
	#references { }
	/* logos */
	#references .wider { margin-top:0; }
	ul#showRef-bornes li { width:25%; height:60px; }
	/* === CONTACTEZ-NOUS === */
	#coordonees p { text-align: center; }
	#coordonees a { line-height:30px; }
	#toutCompris img { width:32%; height:auto; float:left; margin:0 0 0 0 ; }
	#toutCompris .text { width:68%; float:left; }
	/* --- Footer --- */
	#wrap-footer { padding:40px 0 80px 0; }
	#socialLinks { position:relative; top:0; right:auto; width:100%; text-align:center; margin-bottom:40px; }
	#socialLinks a { margin:0 10px; }
	#footer h1, #footer h2, #footer p, #footer br { line-height:16px; }
	#footer p { font-size:12px; }
	/* == MENTIONS LEGALES == */
	#wrap-legals h3 { text-align:left; }
	#wrap-legals p { padding:0 0 25px 10px; }
	#wrap-legals ul { padding:0 0 25px 20px; }
	
	/* ==== CLEANDESK ==== */
	a#logo-cleandesk { width:170px; }
	#wrap-utilisation.cleandesk #utilisation { padding-bottom:270px; }
	#wrap-utilisation.cleandesk #util-2 { margin-top:0; text-align: left; }
	#wrap-utilisation.cleandesk #util-2 h2 { text-align: left; }
	/* perso */
	#wrap-personnalisable.cleandesk #personnalisable { background-size:300px !important; min-height:660px; background:url("../img/perso-bg-cleandesk-mob.jpg") no-repeat center 60px; }
	#wrap-personnalisable.cleandesk article#perso-1 { margin-top:140px; }
	#wrap-personnalisable.cleandesk article#perso-1 p#perso-text { display:inline-block; }
	
	/* ==== SUNBOX ==== */
	a#logo-sunbox { width:170px; }
	#wrap-utilisation.sunbox #utilisation { padding-bottom:270px; }
	#wrap-utilisation.sunbox #util-2 { margin-top:0; text-align: left; }
	#wrap-utilisation.sunbox #util-2 h2 { text-align: left; }
	/* perso */
	#wrap-personnalisable.sunbox #personnalisable { background-size:300px !important; min-height:500px; background:url("../img/perso-bg-sunbox-mob.jpg") no-repeat center 60px; }
	#wrap-personnalisable.sunbox article#perso-1 { margin-top:140px; }
	#wrap-personnalisable.sunbox article#perso-1 p#perso-text { display:inline-block; }
	#options.sunbox { width:100%; }
	.col-1-3 { float:left; width:94%; margin:1%; padding:2%; text-align: center; }
	
	/* ==== CLEANUMBRELLA ==== */
	a#logo-cleanumbrella { width:230px; }
	#wrap-utilisation.cleanumbrella #utilisation { min-height:auto; padding-bottom:330px; }
	#wrap-utilisation.cleanumbrella #utilisation .shorter { width:300px; }
	#wrap-utilisation.cleanumbrella #util-2 { margin-top:0; text-align:left; }
	#wrap-utilisation.cleanumbrella #util-2 h2 { text-align: left; }
	/* perso */
	#wrap-personnalisable.cleanumbrella #personnalisable { background-size:300px !important; min-height:660px; background:url("../img/perso-bg-cleanumbrella-mob.jpg") no-repeat center 60px; /*min-height: 320px;*/ }
	#wrap-personnalisable.cleanumbrella article#perso-1 { margin-top:140px; }
	#wrap-personnalisable.cleanumbrella article#perso-1 p#perso-text { display:inline-block; }
    
    /* ==== Page EVENT (UICN) ==== */
    a#header-event { line-height:53px; }
    a#logo-uicn img { height:53px; }
    #wrap-utilisation.event #utilisation { min-height:auto; background:url("../img/bg-uicn.jpg") no-repeat right bottom; background-size:130%; padding-bottom:300px; }
}



/* ----- JssorSlider ----- */

/* -- Bullet Navigator Style -- */
/* jssor slider bullet navigator skin 21 css */
/*
	.jssorb21 div           (normal)
	.jssorb21 div:hover     (normal mouseover)
	.jssorb21 .av           (active)
	.jssorb21 .av:hover     (active mouseover)
	.jssorb21 .dn           (mousedown)
*/
.jssorb21 {
	position: absolute;
	bottom: 100px;
	left: 120px !important;
}
.jssorb21 div, .jssorb21 div:hover, .jssorb21 .av {
	position: absolute;
 	/* size of bullet elment */
	width: 18px;
	height: 18px;
	text-align: center;
	line-height: 18px;
	color: white;
	font-size: 12px;
	background: url(../img/b21.png) no-repeat;
	overflow: hidden;
	cursor: pointer;
}
.jssorb21 div { background-position: -6px -6px; }
.jssorb21 div:hover, .jssorb21 .av:hover { background-position: -36px -6px; }
.jssorb21 .av { background-position: -66px -6px; }
.jssorb21 .dn, .jssorb21 .dn:hover { background-position: -96px -6px; }

/* ------ Arrow Navigator Style ------ */
/* jssor slider arrow navigator skin 21 css */
/*
	.jssora21l                  (normal)
	.jssora21r                  (normal)
	.jssora21l:hover            (normal mouseover)
	.jssora21r:hover            (normal mouseover)
	.jssora21l.jssora21ldn      (mousedown)
	.jssora21r.jssora21rdn      (mousedown)
*/
.jssora21l, .jssora21r { display: block !important; position: absolute;
	/* size of arrow element */
	width: 55px; height: 55px; cursor: pointer; background: url(../img/a21.png) center center no-repeat; overflow: hidden; }
.jssora21l { background-position: -3px -33px; top: 340px !important; left: 8px; }
.jssora21r { background-position: -63px -33px; top: 340px !important; right: 8px; }
.jssora21l:hover { background-position: -123px -33px; }
.jssora21r:hover { background-position: -183px -33px; }
.jssora21l.jssora21ldn { background-position: -243px -33px; }
.jssora21r.jssora21rdn { background-position: -303px -33px; }

/* ------ Home made Responsive ------ */
#slider1_container { color:#e7e2e0; }
@media screen and (max-width: 1000px) {
	#slider1_container { width:768px !important; height:658px !important; }
	.slideContent { width:768px !important; height:658px !important; }
	.slideContent img { width:768px !important; height:auto !important; }
	/* button */
	.jssorb21 { top: 560px !important; left: 85px !important; }
	/* arrow */
	.jssora21l, .jssora21r { top: 275px !important; }
	.jssora21r { left: 720px !important; }
}
@media screen and (max-width: 800px) {
	#slider1_container { width:300px !important; height:258px !important; }
	.slideContent { width:300px !important; height:258px !important; }
	.slideContent img { width:300px !important; height:auto !important; }
	/* button */
	.jssorb21 { top: 215px !important; left: 30px !important; }
	.jssorb21 div, .jssorb21 div:hover, .jssorb21 .av { background-size:60px 15px !important; width:9px !important; height:9px !important; }
	.jssorb21 div { background-position: -3px -3px; }
	.jssorb21 div:hover, .jssorb21 .av:hover { background-position: -18px -3px; }
	.jssorb21 .av { background-position: -33px -3px; }
	.jssorb21 .dn, .jssorb21 .dn:hover { background-position: -48px -3px; }
	/* arrow */
	.jssora21l, .jssora21r { top: 108px !important; }
	.jssora21r { }
	.jssora21l { left: 0 !important; background-position: -1px -16px; background-size:200px 45px; width:35px; height:35px; }
	.jssora21r { left: 264px !important; background-position: -31px -16px; background-size:200px 45px; width:35px; height:35px; }
	.jssora21l:hover { background-position: -60px -16px; }
	.jssora21r:hover { background-position: -92px -16px; }
	.jssora21l.jssora21ldn { background-position: -121px -16px; }
	.jssora21r.jssora21rdn { background-position: -151px -16px; }
}