/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//+		© Copyright iDIWAY 2015
//+		Tout droits de reproduction interdits
//+		http://www.idiway.fr
//+		$Revision: 182 $
//+		$Date: 2015-06-24 13:44:54 +0200 (mer., 24 juin 2015) $
//+		$HeadURL: svn://svn.id.lan/src/shd/add/iddiapo/trunk/skin/iddiapo.css $
//+
//+		$SRC-Revision: 181 $
//+		$SRC-Date: 2015-06-24 13:41:41 +0200 (mer. 24 juin 2015) $
//+		$SRC-HeadURL: svn://svn.id.lan/src/dev/add/iddiapo/trunk/skin/iddiapo.css $
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/* general */
.idDiapo{ position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; /*padding: 3px; */}
.idDiapo.igdBan.bVert  {display: flex;}
.idDiapo.igdBan.bVert .idDiapoThumb .idSliderCtn {min-height: 200px; max-width: max-content; display: flex; flex-direction: column;}
.idDiapo.cloneFS{display:none; }
.idDiapo.hide{ display: none; }
.idDiapoCtnVw, .idDiapoCtnThumb{ position: relative; }
.idDiapoUI{ height: 0; }

/* UI Diapo */
.idDiapoFullscreen, .idDiapoPrev, .idDiapoNext, .idDiapoMore, .idDiapoThumbPrev, .idDiapoThumbNext{/* display: none; */position: absolute;  z-index: 1; border-radius: 3px; width: 40px; height: 40px; cursor: pointer; }
.idDiapoFullscreen{ top: 3px; right: 3px; width: 40px; height: 40px; background:url('img/full.png') no-repeat 50% 50%; }
.idDiapoNext, .idDiapoPrev{ top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 25px; }
.idDiapoPrev{ left: 3px; background:url('img/prev.png') no-repeat 50% 50%; }
.idDiapoNext{ right: 3px; background:url('img/next.png') no-repeat 50% 50%; }
.idDiapoNum{ display: none; min-height: 30px; line-height: 30px; background-color: rgba(33, 33, 33, 0.8); text-align: center; position: absolute; color: white; z-index: 0; border-radius: 3px; }
.idDiapoNum.enable{ display: block; right: 3px; padding: 0 10px; bottom: 100%; }
.idDiapoLegend{ position: relative; bottom: 30px; }
.idDiapoLegendText{ display: inline-block; background-color: rgba(33, 33, 33, 0.8); color: white; min-height: 30px; line-height: 30px; min-width: 100%; white-space: nowrap; }
.idDiapoMore{ bottom: 3px; height: 25px; left: 50%; background:url('img/plus.png') no-repeat 50% 50% rgba(33, 33, 33, 0.8); opacity: 0.7; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }
.open .idDiapoMore{ background:url('img/moins.png') no-repeat 50% 50% rgba(33, 33, 33, 0.8); }
.idDiapoThumbPrev{ bottom: 12px; width: 25px; left: 3px; background:url('img/prev.png') no-repeat 50% 50%; }
.idDiapoThumbNext{ bottom: 12px; width: 25px; right: 3px; background:url('img/next.png') no-repeat 50% 50%; }
.idDiapoMore.enable, .open .idDiapoMore{ display: block; }
.idDiapo:hover .idDiapoFullscreen.enable, .idDiapo:hover .idDiapoNext.enable, .idDiapo:hover .idDiapoPrev.enable, .idDiapo:hover .idDiapoThumbPrev.enable, .idDiapo:hover .idDiapoThumbNext.enable{ display: block; opacity: 0.7; background-color: rgba(33, 33, 33, 0.8); }
.idDiapo .idDiapoFullscreen.enable:hover, .idDiapo .idDiapoNext.enable:hover, .idDiapo .idDiapoPrev.enable:hover, .idDiapo .idDiapoMore:hover, .idDiapo .idDiapoThumbPrev.enable:hover, .idDiapo .idDiapoThumbNext.enable:hover{ opacity: 1; cursor: pointer; }
.idDiapo:hover .open .idDiapoThumbPrev, .idDiapo:hover .open .idDiapoThumbNext{ display: none; }

/*  Slider VW*/
.idDiapoVw{ /*height: 400px;*/ line-height: 400px; }
.idDiapoCtnImg{ line-height: normal; text-align: center; position: relative; display: inline-block; vertical-align: middle; max-width: 100%; max-height: 100%; /*padding-top: 30px; top: -30px;*/}
.idDiapoCtnImg img{ max-width:100% ; max-height: 100%; vertical-align: middle; display: inline-block;  }
.idDiapoCtnImg .img_g{ display: none; background: none 0 0 no-repeat; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; }

/* Slider Thumb */
.idDiapoThumb.off{ display: none; }
.open .idDiapoThumb{ overflow: visible; }
.open .idDiapoThumb .idSliderCtn{ position: static; white-space: normal; }
.igdBan .idDiapoThumb .idSliderCtn{
/*top: -402px !important;
position: absolute;
left: 727px !important;*/
/*min-height: 200px;
max-width: max-content;
display: flex;
flex-direction: column; */}
.igdBan .sld > .idDiapoThumbImg {border-color: black;}
.idDiapoThumbImg{ border: 2px solid transparent; display: block; vertical-align: middle; width: 60px; height: 60px; cursor: pointer; }
.idDiapoThumb .idSliderItm{ cursor: pointer; }
.idDiapoThumb .idSliderItm:hover .idDiapoThumbImg{ border-color: #aaa; }
.idDiapoThumb .idSliderItm .idDiapoThumbImg img {height: 100%; max-width: unset !important; }
.sld .idDiapoThumbImg{ border-color: white; }

/* Fullscreen */
body.idDiapoOnFullscreen{ width: 100% !important; }
.idDiapoOnFullscreen > *{ display: none; }
.idDiapoOnFullscreen > .idDiapo:not(:empty){ display: block !important; border: none !important; width: 100% !important; height: 100% !important; position: fixed !important; top:0 !important; right:0 !important; bottom:0 !important; left:0 !important; margin: 0 !important; padding: 0 !important; z-index:10000 !important; }
.idDiapoOnFullscreen .idDiapoCtnImg{ -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); top: 50%; left: 50%; position: absolute; background: none 0 0 no-repeat; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.idDiapoOnFullscreen .img_m{ display: none; }
.idDiapoOnFullscreen .img_g{ display: inline-block; }
.idDiapoOnFullscreen .idDiapoCtnVw{ position: absolute; bottom: 64px; top: 0; left: 0; right: 0; height: auto; }
.idDiapoOnFullscreen .idDiapoCtnThumb{ position: absolute; bottom: 0px; left: 0; right: 0; }
.idDiapoOnFullscreen .idDiapoVw{ top: 0; bottom: 0; left: 0; right: 0; position: absolute; height: auto; line-height: normal; }
.idDiapoOnFullscreen .idDiapoFullscreen{ background-image: url('img/unfull.png'); }
.idDiapoOnFullscreen .idSliderItm {overflow: initial;}
.idDiapoOnFullscreen .idDiapoVw .idSliderCtn .idSliderItm {height: calc(100vh - 60px); max-height: unset !important;}

/* MOSAIC */
.idDiapoCtnMosaic {position: relative; background-color: #fff;}
.idDiapoMosaicFirst { margin: 0 auto; position: relative;}
.idDiapoMosaicThumb {position: absolute; bottom: 0; right: 0; border: 5px solid #fff; border-width: 3px 0 0 3px; background: #fff; display: flex; flex-direction: column;}
.idDiapoMosaicThumbImg {max-width: 50px; border: 2px solid #fff; display: flex; align-items: center; border-right: 0; position: relative; border-width: 0 0 2px 0;}
.idDiapoMosaicThumbImg img,
.idDiapoMosaicFirstThumb img {max-width: 100%;}
.idDiapoMosaicThumb .idDiapoMosaicThumbImg:last-child {border-width: 0;}
.idDiapoMosaicThumbMore { display: flex; position: absolute; left: 0; top: 0; width: 100%; height: 100%; justify-content: center; align-items: center; color: #fff; background-color: rgba(0,0,0,0.52); font-size: 18px; z-index: 5;}

.idDiapoMosaicThumbMore::after, .idDiapoMosaicThumbImg::after, .idDiapoMosaicFirstThumb::after {content: ''; cursor: pointer; position: absolute; background-color: rgba(0,0,0,0.3); opacity: 0; transition: 0.5s; width: 100%; height: 100%; left: 0; top: 0; z-index: 55;}
.idDiapoMosaicThumbMore:hover::after, .idDiapoMosaicThumbImg:hover::after, .idDiapoMosaicFirstThumb:hover::after {opacity: 1;}
.idDiapoMosaicFirstThumb {display: flex;}