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


html { font-size: 15px;}
body { background:#EFECE8; margin:2rem 2rem 2rem 22rem; font-weight:300; font-family:'Exo', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:14px;}

#login { max-width:400px; margin:0 auto;border-radius:5px; background:#FFF; padding:1px;}
#login .wrap { margin:2rem;}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}


p.ariane { height: 3.2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 3.2em; background: #FFF; font-weight: 400; border-radius: 3px;}

p.ariane a { display: inline-block; padding: 0 2em 0 0.8em; margin-right: 0.8em; position: relative; z-index: 5; font-weight: 500; }


p.ariane a span { float: left; margin: 1em 0.5em 1em 0; height: 1.2em; width: 1.2em; background: #0a84ff no-repeat center center url(../images/pictos/home.svg); background-size:cover; }



.vaillant p.ariane a span  { background-color:#00917E; }
.saunier p.ariane a span  { background-color:#cc0033; }





h2 + .subMenu { margin-top: -0.4rem;}
.subMenu { font-size: 85%;}
.subMenu a { display: inline-block; color: #6F6C68;  font-weight: 500; border: 1px solid #9F9C98; border-radius: 3px; padding: 0.15em 0.3em;}

.vaillant .subMenu a  , .saunier .subMenu a  { color:#6F6C68; }

p.ariane a:before , p.ariane a:after { content: ""; position: absolute; width: 4px; height: 80%; background: #EFECE8; right: 0;}

p.ariane a:before { transform: rotate(-45deg); bottom: 50%; transform-origin: right bottom;}
p.ariane a:after { transform: rotate(45deg); top: 50%; transform-origin: right top;}

a { color:#0a84ff; cursor:pointer; text-decoration:none;}
.colroed {  color:#0a84ff; }
.vaillant a  , .vaillant .colored  { color:#00917E; }
.saunier a  , .saunier .colored { color:#cc0033; }

h1 , .h1 { font-size:200%; margin:1em 0 0.5em 0; font-weight:600;}
h2 , .h2 { font-size:160%; margin:1em 0 0.5em 0; font-weight:600;}
h3 , .h3 { font-size:140%; margin:1em 0 0.5em 0; font-weight:600;}
h4 , .h4 { font-size:120%; margin:1em 0 0.5em 0; font-weight:600;}
h5 , .h5 { font-size:100%; margin:1em 0 0.5em 0; font-weight:600;}

.subTitle { color:rgba(0,0,0,0.5); font-size:85%; font-weight:500; margin: 2em 0 1em 0;}
hr + .subTitle { margin-top:-0.5rem;}

section.contents { max-width:680px;}
section.contents hr { border:none; border-top:1px solid  #FFFCF8; border-bottom:1px solid #D6D4D0;}


#popup { position: fixed; z-index: 90; top: 0; left: 0; background: rgba(0,0,0,0.66); width: 100%; height: 100%; } 

#popup #popup-content { position: absolute; top: 50%; transform: translateY(calc(-50%)); width: 100%; left: 0;  padding: 1rem; box-sizing: border-box;}

#popup #popup-content .center { padding: 1px; background: #FFF; margin: 0 auto; max-width: 480px; }

#popup-wrap { margin: 2rem;}




#archiveProgress { overflow:hidden; margin:0; border-radius: 1px; background:#F6F3F0; height: 2px; }
#archiveProgress div {  border-radius: 1px; width: 0; background:#0a84ff; height: 2px; }
.vaillant #archiveProgress div  { background:#00917E; }
.saunier #archiveProgress div  { background:#cc0033; }
#makeDetails { opacity: 0.6; font-size: 75%; font-weight: 400; margin: 1em 0;}

.choixRadio { margin:1em -3px;}
.choixRadio span { float:left; width:33.33%;}
.choixRadio span a { margin:3px; background:#FFF; color:#000; font-weight:400; background:rgba(255,255,255,0.4); transition:background-color 0.2s; display:block; text-align:center; padding:1.5rem 1rem; border-radius:3px;}
.choixRadio span a.actif, .choixRadio span a:hover { background-color:#FFF;}
.choixRadio span a strong { display:block; margin-bottom:1em;}
.choixRadio span a img { width:4rem; height:auto; }

.noselect , .buttons {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.no-results.small { max-width: 700px; }
.no-results { text-align: center; margin: 3em auto;  padding-top: 5em; background: url(../images/pictos/no-result.svg) no-repeat center 0; color:#5F5C58; font-size: 130%; background-size: 4em auto; }
.no-results h1 { font-size: 150%; margin: 0; line-height: 110%;}
.no-results p { margin: 0.6em 0;}

.no-results .resetFilters {  margin:1.2em 0; display: block; font-size: 90%;  }
.no-results .resetFilters a {  text-align: center; margin:  0 auto;  display: block; box-sizing:border-box;  line-height: 3em; background: #C8C5C2; font-size: 95%; transition: background 0.2s; z-index: 3; font-weight: 500; color: #FFF; border-radius: 4px; padding: 0.15em 1em; width: 300px; text-indent: -1.6em;}
.no-results .resetFilters a span { display: inline-block; background:no-repeat center center url(../images/pictos/reset.svg);  width: 2.2em;}

.no-results .resetFilters a:hover { background: #A8A5A2; }

#resetFilters { height: 70px; margin: 0; display:none; }
#resetFilters a { height: 72px; text-align: center; margin: 0; position: fixed; box-sizing:border-box; height: 72px; line-height: 44px; background: #C8C5C2; font-size: 95%; transition: background 0.2s; z-index: 3; border: 15px solid #FFF; font-weight: 500; color: #FFF; border-radius: 19px; padding: 0 1em; width: 300px; text-indent: -1.6em;}
#resetFilters a span { display: inline-block; background:no-repeat center center url(../images/pictos/reset.svg);  width: 2.2em;}

#resetFilters a:hover { background: #A8A5A2; }

#legendEncart { border-bottom: 3px solid #EFECE8; padding: 0.5rem 1.2rem; color:#7F7C78; font-style: italic; font-weight: 400; font-size: 100%;}
#legendEncart p { margin: 1rem 0;}

.go-back { font-size: 11px; margin: 0.5rem 0 0.5rem 1rem; float: right;}
.go-back a { border-radius: 3px; display: inline-block; font-weight: 700; text-transform: uppercase; text-decoration: none; padding: 0.8em 0.8em 0.6em 1.8em; border:2px solid  #0a84ff; position: relative;}
.go-back a strong { position: absolute; line-height: 20px; font-size: 180%; left: 0.4em; top: 50%; margin: -10px 0;}

.vaillant .go-back a { border-color: #00917E;}
.saunier .go-back a { border-color: #cc0033;}

#menuFooter { border-top: 3px solid #EFECE8;  position: absolute; bottom:0; width: 100%; z-index:5; background: #FFF; }

#menuFooter a { display: block; padding: 0 1rem 0 3rem; line-height: 3.2rem; white-space: nowrap; border-bottom: 2px solid #EFECE8; font-weight: 500; background: url(../images/pictos/tag.svg) no-repeat 1.2rem center; background-size:1.3rem; border-right: 6px solid #FFF;}

#menuFooter a.actif , #menuFooter a.actif:hover { border-right-color:#0a84ff;}
#menuFooter a:hover { border-right-color:#CFCCC8;}

#menuFooter a.unref { background-image: url(../images/pictos/help.svg); }
#menuFooter a.new { background-image: url(../images/pictos/new.svg); }
#menuFooter a.users { background-image: url(../images/pictos/users.svg); }



.error_form { color:#E02; font-weight:500;}


p.buttons  { margin:1em -2px;}
.buttons a { font-weight:400; font-size:90%; padding:0.8em; display:inline-block; margin:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:300px; border-radius:3px; background:#0a84ff; color:#FFF; position:relative;}

.buttons a.invert { background:none; color:#0a84ff;}
.buttons a.invert:before { background:rgba(0,0,0,0.05);}

.vaillant .buttons a {  background-color:#00917E; }
.saunier .buttons a {  background-color:#cc0033; }

.loading .buttons a.submitter { cursor:default;}
.loading .buttons a.submitter:after { position:absolute; top:0; left:0; width:100%; height:100%; background:#0a84ff no-repeat center center url(../images/pictos/loading.gif); z-index:5; content:""; }


.buttons a span { position:relative; z-index:2;}

.buttons a:before { position:absolute; z-index:1; transition:all 0.2s; content:""; height:100%; left:0; top:0; width:0; opacity:0.2; background:rgba(0,0,0,0.15);}
.buttons a:hover:before { width:100%; opacity:1;}


p.small { font-size:90%;}
#col-left { position:fixed; width:20rem; height:100%; margin:0; top:0; left:0; background:#FFF;}
hr {  border:none; margin:1.5rem 0; border-top:1px solid #EAE8E3; }

#logos { height:4rem;  margin:1.5em 0 0 0;  position:relative;  background:#FFF; z-index:2;}
#logos a { float:left; height:4rem; width:48.5%; filter: grayscale(100);  width:calc(50% - 5px); background:no-repeat center center; background-size:contain; box-sizing:border-box; opacity:0.5; border-radius:3px; transition:all 0.2s;  border:1px solid #DAD8D3;}
#logos a.vaillant { background-image:url(../images/logo-vaillant.png);  }
#logos a.saunier { background-image:url(../images/logo-saunier.png);  float:right;}
#logos a:hover { border-color:#DAD8D3; opacity:1; filter: grayscale(0);}


#logo { height:7em; border-top:3px solid #EAE8E3;  background:no-repeat #FFF; margin: 0; bottom: 0; width: 100%;  position: absolute; }
.saunier #logo { background-image:url(../images/logo-saunier.png);  background-position: center center; background-size:auto 5.2em; }
.vaillant #logo { background-image:url(../images/logo-vaillant.png); background-position: center center; background-size:auto 4.6em; }

#user { height:2.2em; line-height:1.1em; padding:1.2rem 1.2rem 1.2rem 4rem; margin:0 0 0 0; border-bottom:3px solid #EAE8E3; position:relative;}
#user strong { font-weight:600; display:block;  padding:0.1em 0; margin:-0.1em 5rem -0.1em 0; overflow:hidden;  text-overflow:ellipsis; white-space:nowrap;}
#user a.logout { font-size:85%;}
#user .avatar { position:absolute; left:1em; padding:0.2em; margin:-0.2em -0.1em; width:2em; height:2em; border-radius:100%; background:#EFECE8 no-repeat center center url(../images/pictos/user.svg); background-size:cover }
#user a.config { width:3rem; opacity:0.6; height:100%; transition:opacity 0.2s, border-color 0.2s;  border-left:1px solid #DAD8D3; position:absolute; right:0; top:0; background:url(../images/pictos/gear.svg) no-repeat center center; background-size:contain;}
#user a.config:hover { opacity:1; border-color:#EAE8E3;}

#search.selection { padding: 1rem; margin: 0;}
#search.selection h1 { font-size: 120%; margin: 0;}
#search {  padding:0 2.6rem 0 10rem;  margin:0 23rem 0 0; position:relative; background:#FFF; max-width:150em;  border-radius:4px; }
#search input {padding:0 1em; font-size:100%;   border:none;  border:1px solid #EAE8E3; border-width:0 0 0 1px;  font-weight:500; display:block; width:100%; border-radius: 3px 0 0 3px; box-sizing:border-box; height:3rem; font-family:'Exo', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;}

#selector { position: absolute; left: 0; width: 10rem; box-sizing: border-box; border-radius: 4px 0 0 4px; height:3rem; line-height: 3rem; font-weight: 400; padding: 0 2.5rem 0 1rem; background: url(../images/pictos/arrow-drop.svg) no-repeat right center; cursor: pointer;}
#selector span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#selector:hover { box-shadow: 0 0 5px rgba(0,0,0,0.1);}


   #search a { position:absolute; transition:opacity 0.2s; opacity:0.5; right:0; top:0; height:100%; width:2.6rem; text-indent:-500px; overflow:hidden; background:url(../images/pictos/search.svg) no-repeat center center; background-size:cover;}
    #search a:hover { opacity:0.9;}
	
	#col-left ul { font-weight:400; list-style:none; margin:1.2rem; padding:0;}
	#col-left ul + ul { margin-top:-1.2rem;}
	#col-left ul.child { font-weight:300; font-size:90%; opacity:0.85; margin:-1rem 1.2rem 2.2rem 2.8rem;}
	#col-left li { overflow:hidden;  text-overflow:ellipsis; white-space:nowrap; padding:2px; margin:0;   }
	
	#col-left label em { font-style:normal; font-size:80%; font-weight:300; opacity:0.75; margin-left:0.2em;}
	
	.check { display:none;}
	.check + label { padding:0.1em 0 0.1em 1.6em; position:relative; }
	.check + label:before { position:absolute; top:0.15em; width:1.1em; background: #FFF; box-sizing:border-box; height:1.1em; border:1px solid #D2D4D6; content:""; left:0; z-index:1; border-radius: 3px;}
	.check:checked + label:after { background:url(../images/pictos/thick.svg) no-repeat center center; background-size:contain; width:1em; height:1em; top:0.2em; left:0;  content:""; position:absolute; z-index:2; } 
.check:checked + label:before { background-color: #0a84ff; border-color: #0a84ff;}

.vaillant .check:checked + label:before { background-color: #00917E; border-color: #00917E;}
.saunier .check:checked + label:before { background-color: #cc0033; border-color: #cc0033;}



#filters { position: relative; margin: 0 0 0 0; }


#col-left 	p.label { text-align:right; margin:0.5em 0 0 0; padding:0 0.9rem; box-sizing:border-box; font-size:75%; font-weight:600; color:#CFCCC8; position:absolute; width:100%; }
#col-left 	hr + p.label { margin-top: -1.6em;}


#select-all { position:absolute; background: #FFF; padding: 0 0.8rem; border-radius: 4px; height:3rem; line-height:3rem; right:13.5rem; margin:0; top:2rem; font-size:90%; z-index:10; font-weight: 400;  }


.multi-btn { position:absolute; right:13.5rem; margin:0; top:2rem; font-size:90%; z-index:10;  }
#selection { right:2rem; }


.multi-btn a.main { display:block; height:3rem; width:8rem; position:relative; z-index:2;  padding-left:2.6rem; border-radius:4px; font-weight:600; white-space:nowrap; line-height:3rem; background:#0a84ff url(../images/pictos/selection.svg) no-repeat 1em center; background-size:1.2em; color:#FFF;}


.multi-btn span.main { display:block; cursor:default; height:3rem; width:8.1rem; position:relative; z-index:2; background:rgba(0,0,0,0.02) url(../images/pictos/arrow-drop.svg) no-repeat 0.15em center; padding-left: 1.2rem; border-radius:4px; font-weight:600; white-space:nowrap; line-height:3rem;  color:#555; box-shadow: 0 0 0 1px rgba(0,0,0,0.03) inset, 0 0 8px 0 rgba(0,0,0,0.07) inset;  padding-left:2.6rem; }

.multi-btn:hover span.main { background-color: rgba(255,255,255,0.1); box-shadow: 0 0 0 1px rgba(0,0,0,0.1) inset , 0 0 5px rgba(0,0,0,0.1);}





#type_selector { position: absolute; background: #FFF;  border-radius: 4px; z-index: 10; box-shadow: 0 0 0 1px rgba(0,0,0,0.1) inset , 0 0 5px rgba(0,0,0,0.1); margin-top:-1em; min-width: 10rem;  opacity:0; transition:opacity 0.3s, margin-top 0.2s; overflow: hidden; height: 0;}


#type_selector.open { margin-top:5px; padding-bottom: 0.5rem;  opacity:1; overflow: visible; height: auto;  }

#type_selector hr { margin: 0.8rem 0;}

#type_selector p { font-size: 110%; margin: 0.8rem 1rem; text-decoration: none; font-weight: 600;}

#type_selector p.sub { font-size: 90%; font-weight: 400; margin:0.5rem 1rem; margin-left: calc(1rem + 3px)}

#nb-results .main span {  border-left-color:rgba(0,0,0,0.06);}


#type_selector p a { display: inline-block;color:#2A2823;  padding-left: 24px; position: relative;}
#type_selector p.sub a { padding-left: 22px;}

#type_selector p a span { position: absolute; left: 0; top: 50%; border: 1px solid #BFBCB8; box-sizing: border-box; border-radius: 100%; height: 16px; width: 16px; margin: -8px 0; transition:border-color 0.2s;  }
#type_selector p a span span { position: absolute; left: 50%; top: 50%; box-sizing: border-box; border-radius: 100%; height: 10px; width: 10px; margin: -5px; border: none;   }

#type_selector p.sub a span { height: 12px; width: 12px; margin: -6px 0;   }
#type_selector p.sub a span span { height: 6px; width: 6px; margin: -3px;   }


#type_selector p a:not(.actif):hover span { border-color:#6F6C68;}


#type_selector p a.actif span span { background: #FFF; }
.vaillant #type_selector p a.actif span span { background: #FFF; }
.saunier #type_selector p a.actif span span { background: #FFF; }

#type_selector p a.actif span  { background: #0a84ff; border:none; }
.vaillant #type_selector p a.actif span  { background: #00917E; }
.saunier #type_selector p a.actif span  { background: #cc0033; }


/*
#type_selector p a.actif  { color:#0a84ff; }
.vaillant #type_selector p a.actif   { color:#00917E; }
.saunier #type_selector p a.actif   { color:#cc0033; }
*/



.multi-btn .main span { position:absolute; text-align:center; right:0; width:3rem; height:100%; border-left:1px solid #FFF; border-left-color:rgba(255,255,255,0.4);}
.multi-btn .main span em { display:inline-block; background:#FFF; background:rgba(255,255,255,0.8); text-align:center; border-radius:30px; font-size:85%; height:1.8em; line-height:1.85em; padding:0 0.4em; font-weight:600; text-align:center; min-width:1em; width:auto; font-style:normal; color:#078572;}

.vaillant .multi-btn .main span em {  color:#098d79; }
.saunier .multi-btn .main span em {  color:#9a0027; }

.vaillant .multi-btn a.main { background-color:#00917E;  }
.saunier .multi-btn a.main { background-color:#cc0033;  }

.multi-btn span.main span em { background: rgba(255,255,255,0.4); }
.multi-btn span.main span em {  color:#666; }

.multi-btn .menu { position:absolute; top:100%; overflow:hidden; height:0; background:#FFF; border-radius:4px; margin-top:-1em; width:100%; opacity:0; transition:opacity 0.3s, margin-top 0.2s; }
.multi-btn .menu a { color:#2A2823; position:relative; z-index:2; display:block; transition:opacity 0.2s; padding:1em 0;  padding-left:2.5rem; font-weight:400; opacity:0.75; background:no-repeat 1em center; background-size:1.2em; }
.multi-btn .menu a:hover { opacity:1;}
.multi-btn .menu a + a { border-top:1px solid #EAE8E3}
.multi-btn .menu a.export { background-image:url(../images/pictos/export.svg);}
.multi-btn .menu a.download { background-image:url(../images/pictos/download.svg);}
.multi-btn .menu a.trash { background-image:url(../images/pictos/trash.svg);}
.multi-btn:hover .menu { opacity:1; height:auto;  box-shadow:0 2px 5px rgba(0,0,0,0.1); margin-top:5px; overflow:visible;}
.multi-btn:hover .menu:before { position:absolute; width:100%; height:100%; padding:10px; margin:-10px; content:""; }



.clear { clear: both;}


.items { margin:1em -2px; }


.multi-btn.inactif  .menu { background: #F9F6F3; opacity: 0.95;}
.multi-btn.inactif  .menu a , .multi-btn.inactif  .menu a:hover { opacity: 0.3; cursor: default;}


.closerButton  , .vaillant .closerButton , .saunier .closerButton  { float: right; margin: -0.1rem -0.1rem 0 1.2rem; text-align: center; line-height: 1.9rem; height: 1.9rem; width: 1.9rem;  font-family: Arial, sans-serif;font-size: 200%; color: #7F7C78; font-weight: 400; border:1px solid #EFECE8;  border-radius: 30px; transition: color 0.2s;}

.closerButton:hover { color:#000;}

/*.items article.selected { background-color:#d8e1ea; }*/

#applyFilters { display: none;}

#filters.loading:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8) no-repeat center center url(../images/loading.gif); opacity: 0.7; z-index: 5;}



.items article a.zoomer { position: absolute; transition: opacity 0.2s; z-index: 2; opacity: 0; background:rgba(0,0,0,0.3) url(../images/pictos/zoom.svg) no-repeat center center; background-size:5em; width: 100%; height: 100%; cursor: pointer;}
.items article:hover a.zoomer { opacity: 0.6;}


.items.list article a.zoomer { background-size: 2.2em; background-position: 0.6em center;}

.items article:before { position:absolute; top:0; left:0; z-index:2; padding: 2px; margin: -2px; background:#4A4843; border-radius:3px; opacity:0; transition: opacity 0.2s; width:100%; height:100%; content:""; }
.items article:hover:before { opacity:0.3; }

.items article a.button.download  { top: 3.4rem; background-color: #FFF; background-image: url(../images/pictos/download-btn.svg); }
.items article a.button { position:absolute; right:0.8rem;margin:1px; top:0.8rem; width:2.4rem; height:2.4rem; background:#FFF url(../images/pictos/add-selection.svg) no-repeat center center; background-size:cover; border-radius:3px;display:none; z-index:4; }


.items.list article a.button {  right:0.6rem;  top:0.6rem; }
.items.list article a.button.download {  right:3.4rem;  }

.items article:hover a.button { display:block;}
.items article.selected a.button.toggleSelection { display: block;  }
.items article.selected a.button.toggleSelection { background-color:#0a84ff; background-image: url(../images/pictos/remove-selection.svg); }

.vaillant .items article.selected a.button.toggleSelection { background-color:#00917E; }
.vaillant .items article a.button.download { background-image: url(../images/pictos/vaillant/download-btn.svg); }
.vaillant .items article a.button { background-image: url(../images/pictos/vaillant/add-selection.svg); }


.saunier .items article.selected a.button.toggleSelection { background-color:#cc0033; }
.saunier .items article a.button.download { background-image: url(../images/pictos/saunier/download-btn.svg); }
.saunier .items article a.button { background-image: url(../images/pictos/saunier/add-selection.svg); }


.items article.selected { border-color:#7F7C78; z-index: 2; box-shadow: 0 0 8px rgba(0,0,0,0.2); }


#zoomedImg { position: absolute; left: 50%; top: 50%;}
#overLay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; background: rgba(0,0,0,0.9); z-index: 100;}
#overLay.zoomed { cursor:pointer;}
#overLay p { color:#FFF; width: 100%; padding: 1em; margin: 0; font-size: 100%; position: absolute; box-sizing: border-box; text-align: center; line-height: 120%;}


.items article a.button span , .items article a.button em { background:#FFF; margin: 0 2px; color:#000; font-size: 90%; font-weight: 400; border-radius: 3px;  font-style: normal; position: absolute; white-space: nowrap; height:2.4rem;  line-height:2.4rem; right: 3.4rem; transition: opacity 0.2s, width 0.2s;  padding: 0; opacity: 0; width: 0; text-align: center;  z-index:4;     }

.items.list article a.button.toggleSelection span , .items.list article a.button.toggleSelection em {right: 6.2rem;}
.items.list article a.button span , .items.list article a.button em { background-color:rgba(255,255,255,0.6);}
.items.list article a.button span:before , .items.list article a.button em:before { display:none;}




.items article a.button span:before , .items article a.button em:before { position: absolute; content: ""; width: 0.8em; height: 0.8em; top: 50%; margin: -0.4em; right: 0; background: #FFF; transform:scale(1,0.7) rotate(45deg) ; z-index: 4; }
.items article a.button strong { font-weight: 400; color:#2A2823; position: relative; z-index: 5; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 0 0.2em;}
.items article a.button:hover span { opacity: 1;  width: 12em; }
.items article.selected a.button:hover span { opacity: 0; width: 0;  }
.items article.selected a.button:hover em , .items article.selected a.button.download:hover span { opacity: 1; width: 12.5em; }


.items article a.loading , .items article.selected a.loading { background:url(../images/mini-load.gif) no-repeat center center #FFF !important; }
.items article a.loading span , .items article a.loading em { display: none;}



.items .col { width:20%;  float:left;}
/*.items.fluid .col.large { width:40%;}*/
.items article { background:#FFF; position:relative; border: 2px solid #FFF; box-sizing:border-box; margin:4px; border-radius:3px; }


.items.list .col { width:100%;}

.items article .wrap { margin:0.8rem;}
.items article .ico { margin:1.2em 0; text-align:center;}
.items article .ico img { max-width:100%; width:auto; max-height:10em; height:auto; }
.items article .picture { border:1px solid #EAE8E3; padding: 8px; }
.items article .picture img { width:100%; display: block; margin: 0 auto; height:auto; display:block; box-sizing:border-box;  background:#EFECE8 url("../images/transparent.png"); }
.items article h4 { font-size:100%; font-weight:600; overflow:hidden; margin:0.7em 0 0 0; padding:0.25em 0; }


.items article h5 { font-size:90%; font-weight:500; overflow:hidden; margin:0 0 0.7em 0; padding:0; }

.items.thumbs article h5 { white-space: nowrap; text-overflow: ellipsis;}


.items article .infos { font-size:85%; font-weight:400;  color:#7F7C78;}
.items article .infos span { white-space:nowrap;}
.items article  hr { margin:1em 0;}

.items.thumbs article .infos { font-size:85%; font-weight:400;  color:#7F7C78; line-height:1.2em; height:2.4em; overflow:hidden; padding:2px 0;}

.items article .preview { position:relative; padding:33% 0; border:1px solid #EAE8E3; background: #FFF; overflow:hidden; margin:0;}
.items article .preview.ico { background:#FFF; margin:0;}
.items.thumbs article .preview.ico div { left:10%; top:20%; width:80%; height:60%; }
.items article .preview div { background:no-repeat center center; border:2px solid transparent;  background-size:contain; position:absolute; left:0; top:0; width:100%; height:100%; box-sizing:border-box; }

.items.list article { font-size:90%;}
.items.list article .wrap { padding-left:3rem; height:2rem; }
.items.list article .preview { height:2.4rem; top:50%; margin:-1.2rem 0; padding:0;  position:absolute; left:0;  border:none; width:3rem;}

.items.list article h4 { float:left; width:52%; width:calc(100% - 430px); margin:0;   white-space:nowrap; text-overflow:ellipsis; line-height:1.1rem; padding:0; }
.items.list article h4 .small { font-size: 85%;}
.items.list article .infos { float:right;  line-height:2rem; margin:0; width:45%; width:calc(420px);}
.items.list article .infos span { float:left;   white-space:nowrap; text-overflow:ellipsis; overflow:hidden; width:33.33%; height:2rem; box-sizing:border-box; padding-left:5px;}
.items.thumbs article h4 { height:1em; white-space:nowrap; text-overflow:ellipsis;}



.form-group.error .form-input , p.checkBox.error , .form-group.file.error , .champ.error , .champ.error:hover  , .champ.error:focus { border-color:#F83131; background-color:rgba(255,0,0,0.02); }
.champ.error , .champ.error:hover  , .champ.error:focus { color:#F83131;  }

.form-group.file {  border:1px solid #AAA; padding:0.8em; background:#FFF;}
.form-group.file p { margin:0;}
.form-group.file hr { margin:0.7em 0 0.8em 0;}

.form-group {
 position: relative;
 margin:1em 0;
}


form .columns .form-group {
	margin:1em 0 0 0;	
}

.form-label {
 position: absolute;
 left: .9em;
 top: 1.25em;
 line-height:90%;
 color: #999;
 z-index: 10;
 font-weight:400;
 transition:top 0.1s, font-size 0.1s, color 0.1s, left 0.1s; transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);
 cursor:text;
}

.form-label em {
    background:#FFF;font-style: normal; font-size: 70%; left:0; position: absolute; top: 100%; white-space: nowrap; padding: 0.3em 0.4em; margin:0.75em -0.4em; color:#C2C4C6; transition: all 0.2s;
}

.focused .form-label em {
    opacity:0; 
    font-size: 90%;
    top:200%;
}

.focused .form-label , .readonly .form-label {
 font-size: 66%;
 top:0.8em;
 left: 1.5em;
 font-weight:400;
 color: #AFACA8;
 
}

.form-input , .champ {
 position: relative;
 padding: 1.3em .9em 0.6em .9em;
 width: 100%;
 outline: 0;
 border: 0;
 border:1px solid #AFACA8;
 border-radius:2px;
 border-color:rgba(0,0,0,0.2);
 transition: border-color .2s ease-out; transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);
 font-size:100%; line-height:100%;
 box-sizing:border-box;
 font-family:'Exo', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; 
}

.champ {

 padding: 1em .9em 0.9em .9em;
}


textarea.form-input { height:8em; resize:none;}

.form-input:focus , .form-input:hover {
	border-color:#222; border-color:rgba(0,0,0,0.8);
}

.readonly .form-input:focus , .readonly .form-input:hover , .readonly .form-input {
	border-color:#AAA; border-color:rgba(0,0,0,0.1); background-color:rgba(255,255,255,0.3); cursor:default; font-weight:500; color:#888; color:rgba(0,0,0,0.5);
}

.form-input.filled {
	
}

input.invisible { position:absolute; font-size:0; padding:0; left:-1000px;}


#applyFilters { margin: 1rem;}
#applyFilters a { text-align: center; display: block;}




p.folio { text-align:center; margin: 2em 0; padding-top: 2em; border-top: 1px solid rgba(0,0,0,0.06); }
p.folio a , p.folio span { height:1em;line-height:1em;  background: #FFF; min-width:1em; padding:0.5em; border-radius:3px; font-weight:500; margin:0.3em; display:inline-block; text-decoration:none;}
p.folio span { color:#AAA; background-color: rgba(255,255,255,0.3); cursor:default;}




#loader_files { position: fixed; display: none; bottom: 1em; left: 50%; background: #FFF url(../images/loading.gif) no-repeat 1em center; color: #000; font-weight: 500; line-height: 110%; padding:1.5em 1.5em 1.5em 4em; border-radius: 0.5em; box-sizing: border-box; }


#drop_file_area {
    height: 8em;
    border: 2px dashed #ccc;
    line-height: 8em;
    text-align: center;
    font-size: 160%;
    background: #f9f9f9;
    margin-bottom: 2rem;
    font-weight: 500;
    padding: 2% 1em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
 
  .drag_over {
    color: #000;
    border-color: #000;
  }
 
  .thumbnail {
    width: 100px;
    height: 100px;
    padding: 2px;
    margin: 2px;
    border: 2px solid lightgray;
    border-radius: 3px;
    float: left;
  }
 
  #upload_file {
    display: none;
  }


#uploaded_file p { padding: 1em; background: #FFF; box-shadow: 0 0 15px rgba(0,0,0,0.05);}



@media screen and (min-width: 1900px) {
    .items .col { width:16.66%; }
/*  .items.fluid .col.large { width:33.33%;}*/
}

@media screen and (min-width: 2200px) {
    .items .col { width:14.28%; }
/*  .items.fluid .col.large { width:28.56%;}*/
}




@media screen and (max-width: 1600px) {
    .items .col { width:25%; }
/*  .items.fluid .col.large { width:50%;}*/
}

@media screen and (max-width: 1300px) {
    .items .col { width:33.33%;  }
/*  .items.fluid .col.large { width:66.66%;}*/
}


@media screen and (max-width: 1100px) {
    .items .col { width:50%;  }
/*  .items.fluid .col.large { width:50%;}*/
}




@media screen and (max-width: 800px) {
    .items .col { width:100%;  }
/*  .items.fluid .col.large { width:100%;}*/
}