/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//+		© Copyright iDIWAY 2012
//+		Tout droits de reproduction interdits
//+		http://www.idiway.fr
//+		$Revision: 4510 $
//+		$Date: 2017-07-06 15:04:47 +0200 (jeu. 06 juil. 2017) $
//+		$HeadURL: svn://svn.id.lan/pko/sat/14/144_cst/trunk/tpl/tpl0/css/mod/mod19a/ls.css $
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

:root {
	--h-w: 70px;
	--h-h: 20px;
}

html, .iTpl-body {overflow-x: hidden;}

.iTpl-wcm-main {height: 100%; max-height: unset;}

.iTpl-wcm-main.vw-empty .segment .wcm-bar {background-color: #BEBEBE; pointer-events: none;}
.iTpl-wcm-main.vw-empty .segment {pointer-events: none;}

.iTpl-wcm-timeline .hov-bar {display: none; background-color: rgba(173, 196, 12,0.3); width: 0%; height: 10px; position: absolute; bottom: 30px; z-index: -1;}
.iTpl-wcm-timeline .hov-bar .hov-cursor {position: absolute; right: -6px; bottom: 10px; opacity: 0.25; z-index: -500}
.iTpl-wcm-timeline:hover .hov-bar {display: initial;}
.segment.alone ~ .hov-bar {display: none !important;}
.vw-empty .iTpl-wcm-timeline:hover .hov-bar, .vw-empty .cursor, .vw-empty .info-hor, .vw-empty .grad.hidden {display: none;}


.vw-empty-frame .vw-noempty {display: none;}
.vw-empty-frame .vw-empty {display: block; margin: auto;}



#focus_wcm {border: none !important; height: 1px !important; position: absolute; width: 1px !important; z-index: -1; background: transparent;}

.iTpl-wcm-ctn .vw-noempty {transition: filter 0.5s; background-color: transparent; width: 100%;max-height: 100%;}
.iTpl-wcm-ctn.has-blur .vw-noempty, .iTpl-wcm-ctn.loading .vw-noempty {/*filter: blur(4px);*/}
/*.iTpl-wcm-ctn .vw-thumb { position: absolute; width: var(--v-w); left: calc(50% - calc( var(--v-w) / 2 )); height: var(--v-h); top: unset; bottom: 0; opacity: 0; transition: 0.3s; border: 1px solid #E8E8E8;}
.iTpl-wcm-ctn .vw-hor { text-align: center; position: absolute; width: var(--h-w); left: calc(50% - calc( var(--h-w) / 2 )); padding: 4px 7px; border-radius: 3px;  top: unset;font-weight: 900; 
	background-color: #E8E8E8; bottom: -10px; opacity: 0; transition: 0.3s; border: 1px solid #E8E8E8; box-shadow: 1px 1px 3px rgba(0,0,0,0.6);}*/
.iTpl-wcm-ctn.has-blur .vw-thumb, .iTpl-wcm-ctn.has-blur .vw-hor {opacity: 1;}

/*.i-frm__text__ctr {padding-top: 5px;}*/
/*.i-frm__grp.date {max-height: 40px; padding-top: 0; padding-bottom: 0;}*/
.i-frm__grp.date {padding-top: 10px; padding-bottom: 10px; filter: brightness(0); height: 100%; border: 0;}
.da_ide {    margin-top: 5px; margin-bottom: 5px; display: none !important;}

/*.iTpl-wcm-timeline .segment .wcm-v {display: none; position: absolute; bottom: 170px; border: 1px solid #E8E8E8; left: calc(50% - calc(var(--v-w) / 2) ) !important; z-index: 50;}*/

.iTpl-wcm-timeline .segment {user-select: none;}

input.if_ide { border: 1px solid transparent !important; font-weight: 900; font-size: 12px; height: 26px !important;     outline: 0px !important; }

.vw-now-btn {position: absolute; right: 0; bottom: 0; padding: 8px 14px 8px 14px; box-shadow: 0 0 3px rgba(255,255,255,0.8); background-color: rgba(255,255,255,0.8); border-radius: 5px 0 0 0; height: 45px;
	display: flex; align-items: center;cursor: pointer}

.vw-now-hor {display: none;}
.vw-now .vw-now-btn a {display: none;}
.vw-now .vw-now-btn .vw-now-hor {display: initial;     padding-top: 5px;}
.vw-now-btn img { position: absolute; top: 17px; right: 10px; }


/*PVW*/
.iTpl-wcm-timeline.pvw { max-width: 60px;  padding-right: 20px;}
.iTpl-wcm-timeline.pvw .segment {opacity: 0.65; transition: 0.5s;}
.iTpl-wcm-timeline.pvw #gradient { position:absolute; z-index:2; right:0; bottom:0; left:0; height: 100%; background: linear-gradient(to left, rgba(255,255,255,0) 0%,rgba(255, 255, 255, 0.5) 100%); cursor: pointer;}
.iTpl-wcm-timeline.pvw.pvw-right {padding-left: 20px; padding-right: 0;}
.iTpl-wcm-timeline.pvw.pvw-right #gradient {background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255, 255, 255, 0.5) 100%);}
.iTpl-wcm-timeline.pvw #gradient:hover + .segment {opacity: 1;}

/*STATIC*/
.static {width: 100%; height: max-content; flex: 0; z-index: 50; background-color: transparent;}
.static .cursor img {position: absolute; left: -6px; bottom: 10px}

/*ANIM COMMA*/
@keyframes hor {
  from { opacity: 1; }
  to { opacity: 0; }
}
.comma {animation: hor 2s infinite running;}

.wcm-now-lnk {padding: 5px 16px 0 5px; color: /*#ADC40C;*/#000 }
.wcm-now-lnk img {margin-left: 5px; width: 7px !important; height: 11px; filter: brightness(0);}

.iTpl-menu {display: none;}
.iTpl-main {padding-top: 0; padding-bottom: 0; min-height: unset !important;}


/*ARROW*/
.iTpl-wcm-arrow {max-height: max-content; flex: 1; margin-top: 20px; position: relative; max-width: 50px; cursor: pointer;}
.iTpl-wcm-arrow img {height: 18px; position: absolute; bottom: 26px; /*left: 20px;*/ right: 0; opacity: 0.45;}
.iTpl-wcm-arrow.arrow-start img { left: 0; right: unset;}



/*CAL*/

.iTpl-calendrier { display: none; position: absolute; box-shadow: 0 0 3px rgba(0,0,0,0.3); padding: 35px; z-index: 501; bottom: 0; /*height: 384px;*/ width: 100%; height: 100%;}
.iTpl-calendrier.show {display: initial;}

.iTpl-calendar-info {display: flex; align-items: center; padding: 5px; position: relative; margin-top: 10px; font-size: 13px; margin-bottom: 20px; }
.iTpl-calendar-info .txt {margin: 0 auto; display: flex; align-items: center;}
.iTpl-calendar-info .txt img {width: 24px; margin-right: 5px;}
.iTpl-calendar-info .close {height: 100%; right: 0px; top: 0; position: absolute; padding: 5px; display: flex; align-items: center; cursor: pointer; padding-right: 2.5px; opacity: 0.28;}



.vw-empty .picto-wcm { top: 8px;}

.vw-empty .empty-img {max-width: 100%; max-height: 100%;}



/*
 *
 * GESTION FULLSCREEN
 *
 */

 @keyframes img-full {
 	0% { width: 0; height: 0; margin-left: 50%;}
 	100% { width: 100%; height: 100%; margin-left: 0; }
 }

.vw-noempty.fullscreen .iTpl-wcm-img {animation: img-full 0.4s linear; width: 100%; height:100%; z-index: 2001; position: fixed; max-width: 1200px; max-height: 600px; top: calc(50% - 300px); left: calc(50% - 600px);}
.vw-noempty.fullscreen:after {content: ' '; position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 2000; top: 0; left: 0;}

@media screen and (max-width: 1200px){
	.vw-noempty.fullscreen .iTpl-wcm-img {left: 0; margin-left: 10px; margin-right: 10px; max-width: calc(100% - 20px);}

}

@media screen and (max-height: 600px){
	.vw-noempty.fullscreen .iTpl-wcm-img {top: 0; margin-top: 10px; margin-bottom: 10px; max-height: calc(100% - 20px);}
}

/*
 *
 */


@media screen and (min-width: 1230px){
	.iTpl-calendar {height: 100%; width: 100%;}
	.iTpl-calendar .td {width: 48px; height: 48px; font-size: 15px;}
}


@media screen and (max-width: 1230px){
	.iTpl-wcm-ctn {width: 100%; height: max-content;/* max-height: 60%; min-height: 200px;*/ min-height: 320px;}
	.iTpl-wcm-ctn .vw-noempty img{width: 100%;}
	/*.vw-empty, .vw-noempty {line-height: 0;}*/

	.iTpl-wcm-ctrl {/*flex-direction: column-reverse;*/ margin: 0;}
	.iTpl-wcm-btn {flex-direction: row; /*padding-top: 50px;*/}
	
	.iTpl-main { height: calc(100% - 103px); padding-top: 0 !important;}
	.iTpl-wcm-main {height: 100%;}
	.iTpl-body {height: 100%;}

	/*CALENDAR*/
	.iTpl-calendrier {position: fixed; top: 0; left: 0; width: 100%;}
	.calendar {width: 450px; height: 400px;}
	.calendar table {width: 100%; height: 100%; font-size: 13px;}
	.calendar tbody .day {text-align: center;}



	/*CAM*/
	.vw-empty .picto-wcm {top: 3px;}

}

@media screen and (max-width: 1000px){
	/*.iTpl-body {    overflow-y: hidden !important;}*/
	.iTpl-wcm-main { max-height: calc(100% - 130px);}

	.iTpl-head img {height: 40px !important;}

}

@media screen and (max-width: 890px){
	.iTpl-calendrier {top: 0; height: 100%; position: fixed; left: 0; max-height: calc(100% - 60px); padding-top: 20px !important;}
}

@media screen and (max-width: 780px){
	.wcm-hor {min-width: 50px;}

	.iTpl-main .iTpl-col-pag.large.iTpl-wcm-main {padding: 20px;}

	.iTpl-wcm-timeline {margin-top: 0;}
	.iTpl-wcm-timeline .segment {height: 70px; }

	.iTpl-wcm-timeline.pvw { max-width: 50px;}

	.iTpl-wcm-arrow img {height: 20px; bottom: 26px;}

}

@media screen and (max-width: 680px){
	/*ID EDITOR*/
	.i-frm__text__ctr {padding: 0;}
	.i-frm__grp.date {padding: 0; height: max-content;}
	.da_ide {display: none !important;}
	.btn_ide {padding: 8px !important; display: inline-block !important; width: 32px; height: 32px;}
	input.if_ide { height: 21.2px !important;}

	/*CALENDAR*/
	.calendar {width: 100%; top: 70px !important; left: 100%; min-height: calc(100% - 70px); height: calc(100% - 70px);}
	.calendar table {width: 100%;height: calc(100% - 70px); max-height: 250px;}
	.calendar tbody .day {text-align: center;}
	.calendar .button.nav {font-size: 20px;}

	@keyframes cal {
	  from { left: 100%; }
	  to { left: 0; }
	}
	.calendar {animation: cal 0.75s;}

	/*CTN WCM*/
	.iTpl-wcm-ctn {min-height: unset;}

	/*IMG WCM*/
	.iTpl-wcm-info .picto-wcm { top: 12px;}

	/*CAL*/

	.iTpl-calendrier { width: 100%; font-size: 14px;}

}

@media screen and (max-width: 640px){
	.calendar {top: 50px !important; height: 50%; min-height: calc(100% - 90px); position: fixed !important;}

	.iTpl-calendrier { top: 50px; position: fixed; left: 0;}
}

@media screen and (max-width: 570px){
	/*.iTpl-calendrier { top: -70px; }*/

	.iTpl-wcm-arrow img {height: 16px; bottom: 28px;}

	.iTpl-wcm-ctn .vw-empty img {/*margin-left: -6%;*/}
}

@media screen and (max-width: 520px){
	.iTpl-wcm-info .info-hor {font-size: 18px;}
	.iTpl-wcm-info .info-date {font-size: 8px; line-height: 8px;}
	.iTpl-wcm-info .picto-wcm { top: 10px;}
	.vw-empty .iTpl-wcm-info .picto-wcm {top: 2px;}
	.iTpl-wcm-info .picto-wcm img { width: 22px;}

	/*BAS DROITE IMG*/
	.iTpl-wcm-btn { padding-right: 8px;}
	.vw-now-btn {padding: 8px; height: 30px;}
	.vw-now-btn img { top: 10.5px;}
	.wcm-now-lnk {padding: 2px 16px 0 5px;}

	.iTpl-wcm-timeline.pvw {max-width: 30px; font-size: 10px; margin-left: -20px;}

	/*.iTpl-calendrier { bottom: -120px; }*/

}

@media screen and (max-width: 500px){
	.iTpl-wcm-main.iTpl-col-pag.large { padding: 20px 10px !important; }

	.iTpl-wcm-ctrl {/*flex-direction: column-reverse;*/ margin: 0; /*padding: 0 25px;*/}

	/*.vw-now-btn img {top: 19px;}*/
	/*.iTpl-calendrier { bottom: -140px; }*/


	.iTpl-wcm-arrow {max-width: 25px;}
}

@media screen and (max-width: 420px){
	/*.iTpl-calendrier { bottom: -160px; }*/
	.iTpl-wcm-ctn .vw-empty img { /*margin-left: -16%;*/ object-position: center; width: 100%; height: 100%;}
}

@media screen and (max-width: 375px){
	/*.iTpl-calendrier { bottom: -175px; }*/
}

/*HEIGHT*/
@media screen and (max-height: 780px){
	.iTpl-wcm-ctn {max-height: 500px; max-width: 1000px;}

	.iTpl-calendrier {position: fixed; top: 0; left: 0; width: 100%;}
}

@media screen and (max-height: 700px){
	.iTpl-logo-responsive {padding-top: 5px; padding-bottom: 0px; background-color: transparent;}
	.iTpl-logo-responsive img {height: 30px; background-color: #fff; padding: 3px; border-radius: 3px;}
}

@media screen and (max-height: 650px){
	.iTpl-wcm-ctn {max-height: 350px;  max-width: 700px;}
}

@media screen and (max-height: 550px){
	.iTpl-logo-responsive {display: none !important;}
	/*.iTpl-calendrier {top: 0; font-size: 13px;}*/

	.iTpl-calendar .td {width: 32px; height: 32px; font-size: 14px;}
	.iTpl-calendrier { padding: 30px 70px 44px 70px;}
	.iTpl-calendrier > * { max-width: 700px; margin: auto;}
}

@media screen and (max-height: 500px){
	/*.iTpl-wcm-ctrl {margin-bottom: 100px;}*/

	.iTpl-wcm-ctn {max-height: 200px;  max-width: 400px;}
}

@media screen and (max-height: 470px){
	.iTpl-wcm-ctn {min-height: 200px; max-height: 250px; max-width: 500px;}
}

@media screen and (max-height: 400px){
	.iTpl-logo-responsive {display: none !important;}


	.iTpl-calendrier.cal-next-dsb.show { position: fixed; top: 0; left: 0; padding: 20px 90px;}

	.iTpl-wcm-ctn {min-height: 200px; max-height: 210px; max-width: 420px;}
}



/*WIDTH AND HEIGHT*/
@media screen and (max-height: 700px) and (max-width: 890px){
	.iTpl-wcm-ctrl {margin-bottom: 100px;}
}

@media screen and (max-height: 470px) and (max-width: 470px){
	.iTpl-calendrier {font-size: 12px;}
	.iTpl-calendar .td { height: 26px; width: 26px;}
}