/* Header info bar */
#main-content-title .right.infos-ski .info { position:relative; top:-4px; }
#main-content-title .right.infos-ski .alert { margin-right:0; }
#main-content-title .right.infos-ski .alert + .alert { margin-left:2px; }
#main-content-title .right.infos-ski .maj { position:absolute; top:52px; right:10px; font-size:10px; margin:0; padding:0; line-height:1; color:#666; }

/* Meteo extra infos */
#content .meteo-extra-infos { padding:19px 0 18px; }
#content .meteo-extra-infos .label { padding:0 0 10px 0; font-size:14px; }
#content .meteo-extra-infos .extra-info { cursor:default; display:inline-block; vertical-align:middle; margin:0 15px 4px 0; font-size:13px; font-weight:300; }
#content .meteo-extra-infos .extra-info img { padding:0 3px 0 0; }
#content .meteo-extra-infos .extra-info span { display:inline-block; vertical-align:middle; }
#content .meteo-extra-infos .extra-info span i { font-style:normal; text-transform:none; }


/* Weather box */
#box-weather { height:130px; background:rgba(255,255,255,0.85); color:#000; position:relative; font-size:14px; overflow:hidden; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
#box-weather .wrapper { height:100%; }
#box-weather .list-pushs { position:relative; height:100%; z-index:1; overflow: hidden; }
#box-weather .list-pushs .push { position:absolute; top:0; left:100%; width:100%; height:100%; }
#box-weather .list-pushs .push.first { left:0; }
#box-weather .push a { text-decoration:none; color:#000; }
#box-weather .push a:hover {text-decoration:underline;}
#box-weather .push .content { text-transform:uppercase; font-size:0; font-weight:400; box-sizing:border-box; opacity:0; }
#box-weather .push.active .content { opacity:1; }
#box-weather .push .title { line-height:1; margin:0; padding:10px 0; display: inline-block; cursor:default; text-transform:uppercase; position:relative; font-size: 24px; font-weight:700; visibility:hidden; position:relative; z-index:10; }
#box-weather .push.active .title { visibility:visible; }
#box-weather .push .title .text { display: inline-block; vertical-align:top; padding:0 20px; color:#021f38; }
#box-weather .push .title small { font-size:15px; }
#box-weather .push .title a:before { content:' '; display:block; position:absolute; right:0; bottom:0; width:100%; height:100%; }
#box-weather .push .title .line-break { display:none; }
#box-weather .push .title .navig{ position:absolute; color:#003352; opacity: 0.6; font-family: Lato; font-weight: 500; font-size:16px; cursor:pointer; }
#box-weather .push .title .navig.prev { top:12px; right:100%; display:inline-block; background: url('../img/arrow-prev-box-weather.png') no-repeat right; padding-right:25px; }
#box-weather .push .title .navig.next { top:12px; left:100%; display:inline-block; background:  url('../img/arrow-next-box-weather.png') no-repeat left; padding-left:25px; }
#box-weather .push .cols { position: relative; margin:0; text-align:center; font-size:0; display: inline-block; vertical-align: top; }
#box-weather .push .cols .col { position: relative; font-size:14px; text-decoration: none; display:inline-block; vertical-align:top; margin:0; padding:0 11px; text-align:center; box-sizing:border-box; }
#box-weather .push .cols .col:after { content:' '; display:block; width:1px; height:50px; position: absolute; top:6px; right:0; background:rgba(0,0,0,0.5); transition: 150ms ease-out; }
#box-weather .push .cols .col .label { font-size:12px; display:block; margin-bottom:7px; color:#49c3ec; transition: 150ms ease-out; }
#box-weather .push .cols:hover .col .label { color:#0098c0; }
#box-weather .push .cols:hover .col:not(:last-child):after { opacity:0.5; height:42px; top:10px; }
#box-weather .push .cols .col .icon { display:inline-block; font-size:1px; vertical-align:top;}
#box-weather .push .cols .col .info { display:inline-block; font-size:11px; vertical-align:bottom; }
#box-weather .push .cols .col .icon + .info { margin-left:2px; }
#box-weather .push .cols .col .info span {display:block;}
#box-weather .push .cols .col .info small {font-size:12px;vertical-align:baseline;}
#box-weather .push .cols .col .info strong {font-weight:400;font-size:23px;vertical-align:baseline;}
#box-weather .push .cols .col .info strong.small { font-size:18px; }
#box-weather .push .maj { visibility:hidden; opacity:0; position: absolute; width:100%; left:0; bottom:5px; clear:both; float:none; cursor: default; margin:0; text-transform:none; text-align:center; font-size:12px; color:#777; transition:opacity 800ms ease-out; }
#box-weather .push.active .maj { visibility:visible; opacity:1; }
#box-weather .push .roads {margin:21px 40px 0; font-size:13px; line-height:15px; padding:15px 0 0; text-align:center; border-top:1px dashed rgba(255, 255, 255, 0.16); }
#box-weather .push .roads .icon { width:12px; height:12px; margin:0 2px; display:inline-block; }
#box-weather .push .roads .icon + .icon { margin-left:4px; }
#box-weather .push .aside { margin:0 0 0 14px; vertical-align: top; display: inline-block; text-align: center; font-size:12px; }
#box-weather .push .aside .box-btn { cursor: pointer; text-transform: uppercase; text-decoration: none; color:#fff; background:#003c78; padding:0 12px; height:30px; line-height:30px; display:inline-block; text-align:center; border-radius:4px; }
#box-weather .push .aside .box-btn:hover { background:#1b4886; }
#box-weather .push .aside .mobile-overlay-wrap { margin:20px 0 0; }
#box-weather .push .aside .more a { display: block; text-align:center; height:33px; line-height:33px; }
#box-weather .push .aside .more i { margin-right:5px; }


#box-weather .push .cols .col.big-icon { vertical-align:baseline; }
#box-weather .push .cols .col.temperature .icon { max-width:41px; max-height: 38px; }
#box-weather .push .cols .col.temperature .info { vertical-align:top; margin:0 2px 0 0; }

/* Weather box - meteo "dat" item */
#box-weather .push .cols.meteo-lab-infos .col { text-align:left; }
#box-weather .push .cols.meteo-lab-infos .info { display:inline-block; vertical-align: middle; }
#box-weather .push .cols.meteo-lab-infos .icon { padding:0 3px 0 0; text-align: center; width:14px; vertical-align: middle; }
#box-weather .push .cols.meteo-lab-infos .icon img { max-width: 100%; height:auto; }

#box-weather .push .cols .col.wind .label img { padding:0 0 0 4px; max-width:10px; height:auto; }
#box-weather .push .cols .col.wind .info { font-size:16px; display:block; padding:4px 0 0; }

#box-weather .push .cols .col.meca-top .icon { width:25px; height:auto; }

/* Content top - context */
#content-top #box-weather { margin:70px 0 0; }

/* Info tables */
#content .box .info-table .maj {margin:10px 0 0 0;font-weight:300;font-size:12px;}
#content .box .info-table .avalanche {margin:20px 0 0 0;padding:20px 0 0 0;font-weight:300;font-size:16px;border-top:#5a6a74 1px solid;}
#content .box .info-table .avalanche label {font-size:20px;vertical-align:middle;}
#content .box .info-table .avalanche span {vertical-align:middle;}
#content .box .info-table .avalanche .icon { width:70px; margin:0 8px 0 30px; display:inline-block; }
#content .box .info-table .avalanche .icon img { width:100%; height: auto; display: block; }
#content .box .info-table .temperature { vertical-align:top; }
#content .box .info-table .temperature p { position:relative; }
#content .box .info-table .temperature span { vertical-align:top; padding:20px 0 0; cursor:default; }
#content .box .info-table .temperature .wind { margin:0 11px; border-top:1px dashed rgba(255,255,255,0.16); padding:12px 0 0; }
#content .box .info-table .temperature .wind span { padding:0; }
#content .box .info-table .temperature .day-part { cursor:default; border-radius:7px; display:block; font-size:14px; margin:0 8px 11px; background:rgba(255,255,255,0.1); padding:4px; text-transform:none; position:relative; top:0; right:0; }

/* Miss meteo */
#content .box .miss-meteo { overflow:hidden; background:#fff url('../img/bg-miss-meteo.jpg') no-repeat 30px center; }
#content .box .miss-meteo .video {display:block; position:relative; width:360px;height:202px;margin:44px 0 0 210px; background-repeat:no-repeat; background-position:0 50%; background-size:cover; }

/* Acces station */
#content .acces-station #npy-wrapper-main-canvas-gmap { height:500px; }
#content .acces-station .widget { height:248px; padding:0; }
#content .grid .widget-blablacar { background:#fff; }
#content .grid .widget-blablacar iframe { margin:0; padding:0; border:0; height:100%; width:100%; }
#content .grid .widget-road-condition .icon { margin:5px auto 15px; height:auto; }
#content .grid .widget-road-condition .widget-title { width:auto; margin:20px auto 14px; }
#content .grid .widget-road-condition .widget-title span { margin:0 0 0 20px; display:block; }
#content .grid .widget-road-condition .widget-title.big span{ margin:24px 0 0; font-size:22px; }
#content .grid .widget-road-condition .name { margin:0; display:block; font-size:12px; }
#content .grid .widget-road-condition .desc-road { margin:0 20px; display:block; }
#content .grid .widget-road-condition .road-condition { padding:12px 0 0; }
#content .grid .widget-road-condition.multiple .road-condition { float:left; width:50%; padding:3px 0 0; }
#content .grid .widget-road-condition.multiple .icon { width:67px; margin:10px 0; }
#content .grid .widget-road-condition.multiple .desc-road { font-size:11px; margin:0 15px; }

/* Ouvertures pistes */
#content .box .box-ouverture { width: 50%; float: left; margin: 10px 0;}
#content .box .box-ouverture:nth-child(2n+1) { clear:left; }
#content .box .box-ouverture:last-child:nth-child(2n+1) { width:100%; }
#content .box .box-ouverture ul { list-style: none; padding: 0px; margin: 0px;}
#content .box .box-ouverture li { font-size: 17px; font-weight: 100; float: left; display: block; line-height: 35px; margin-right: 10px; }
#content .box .box-ouverture li.parent { float:none; overflow:hidden; margin:0; }
#content .box .box-ouverture li img { padding-right:4px; vertical-align:middle; position:relative; top:-1px; }
#content .box .box-ouverture li.margin { margin:0 14px 0 0; }
#content .box .box-ouverture li.margin:last-child { margin-right:0; }
#content .box .box-ouverture li.round,
#content .box .box-ouverture li.split-numb { display: block; width: 35px; height: 35px; text-align: center; border-radius: 20px; }
#content .box .box-ouverture li.split-numb { border:0; border-radius:0; position:relative; width:27px; margin-right:8px; }
#content .box .box-ouverture li.split-numb span { position:absolute; display:block; font-size:16px; line-height:1; text-align:center; width:23px; }
#content .box .box-ouverture li.split-numb .current { left:1px; top:0; }
#content .box .box-ouverture li.split-numb .total { left:8px; top:24px; }
#content .box .box-ouverture li.split-numb i { background:url('../img/line-split-numbers.png') no-repeat 50% 50%; display:block; height:13px; margin:14px 0 0; }
#content .box .box-ouverture li.round.green { background-color: #00a651; }
#content .box .box-ouverture li.round.blue { background-color: #0072bc; }
#content .box .box-ouverture li.round.red { background-color: #ed1c24; }
#content .box .box-ouverture li.round.black { background-color: #000000; }
#content .box .box-ouverture li.small-text { line-height:20px; text-transform:none; }
#content .box .box-ouverture li.parent li { margin-bottom:10px; }
#content .box .ouverture { position: relative; padding:20px 0; }
#content .box .ouverture > :first-child { padding-top:0; }
#content .box .ouverture .subtitle img { position: relative; top: -2px; margin-right: 5px; }
#content .box .ouverture .maj { clear: both; padding:15px 20px 0;}
#content .box .ouverture .title_state .sep { margin:0 2px; font-weight:400; }
#content .box .ouverture .title_state .open { color:#00a651; }
#content .box .ouverture .title_state .closed { color:#ed1c24; }
#content .box .ouverture .title_state .partial { color:#ffa900; }
#content .box .ouverture .station_state { font-size:20px; text-transform: uppercase; font-weight: 700; text-align: center; display: block; padding:0 20px; }
#content .box .ouverture .station_sub_state { font-size:14px; text-transform: uppercase; font-weight: 400; text-align: center; display: block; padding:0 20px; }
#content .box .ouverture .station_detail { padding:0 20px; }
#content .box .ouverture .station_detail .small-text { text-transform: none }
#content .box .ouverture .station_detail .subtitle {     display: flex;  align-items: center; }

#content .box .white-btn { display:block; cursor:pointer; position:absolute; background: #fff; border:0; margin:20px 0 0; line-height:20px; color: #495b66; text-transform: uppercase; padding:8px 20px; text-decoration: none; box-sizing: border-box;  }
#content .box .white-btn.btm { bottom:0; }
#content .box .white-btn.left { left:0; }
#content .box .white-btn.right{ right:0; }
#content .box .white-btn.top{ top:0; }
#content .box .white-btn.btm.left { border-top-right-radius: 20px; }
#content .box .white-btn.btm.right { border-top-left-radius: 20px; }
#content .box .white-btn:hover { background: #003c78; color: #fff; }

/* Detailed bulletin */
#content .detailed-bulletin { padding:30px 20px 0; }
#content .detailed-bulletin.collapsable { display:none; }
.season-summer #content .detailed-bulletin.collapsable { display:block; }
#content .detailed-bulletin .subtitle { padding:0 0 15px; margin:0; font-size:21px; text-transform:uppercase; }
#content .detailed-bulletin .subtitle img { margin:0 5px 0 0; }
#content .detailed-bulletin .sector { margin:20px 0 0; }
#content .detailed-bulletin .sector:first-child { margin:0; }
#content .detailed-bulletin .sector_label { position:relative; font-size:20px; font-weight:400; line-height:34px; background:rgba(255,255,255,0.15); text-align:center; text-transform:uppercase; border-radius:5px; }
#content .detailed-bulletin.collapsable .sector_label { cursor:pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
#content .detailed-bulletin.collapsable .sector_label:after { content:""; display:block; width:8px; height:16px; background:url('../img/icon-nav-next-small.png') no-repeat 100% 50%; position:absolute; top:50%; right:13px; margin:-8px 0 0; -webkit-transform: translate3d(0, 0, 0); transition:all 0.2s ease-in-out; }
#content .detailed-bulletin.collapsable .sector_label:hover { background:rgba(255,255,255,0.25); }
#content .detailed-bulletin.collapsable .sector .sector_label.exp:after { transform:rotate(90deg); }
#content .detailed-bulletin.collapsable .sector_detail { display:none; }
#content .detailed-bulletin.collapsable .sector:first-child .sector_detail { display:block; }
#content .detailed-bulletin .sector_content { padding:6px 10px 0; }
#content .detailed-bulletin .sector_content .label { background:rgba(255,255,255,0.05); position:relative; font-size:14px; line-height:30px; text-transform:uppercase; text-align:center; border-radius:5px; margin:0 0 2px; }
#content .detailed-bulletin .sector_content .label .count { position:absolute; top:5px; right:2px; display:block; line-height:20px; width:34px; font-size:12px; margin:0; background:rgba(0,0,0,0.1); text-align:center; padding:0 2px; border-radius:3px; }
#content .detailed-bulletin .sector_content .list { margin:0; padding:0; list-style:none; }
#content .detailed-bulletin .sector_content .line { overflow:hidden; padding:3px 4px; border-top:1px solid rgba(255,255,255,0.2); margin:0; list-style:none; }
#content .detailed-bulletin .sector_content .multiple .line:hover { background:rgba(255,255,255,0.05); }
#content .detailed-bulletin .sector_content .line:first-child { border:0; }
#content .detailed-bulletin .sector_content .line .prefix { float:left; width:24px; margin:1px 2px 0 0; }
#content .detailed-bulletin .sector_content .line .prefix > div { width:18px; height:18px; overflow:hidden; text-align:center; }
#content .detailed-bulletin .sector_content .line .prefix .color { border-radius:18px; }
#content .detailed-bulletin .sector_content .line .prefix .green { background:#00a651; }
#content .detailed-bulletin .sector_content .line .prefix .blue { background:#0072bc; }
#content .detailed-bulletin .sector_content .line .prefix .red { background:#ed1c24; }
#content .detailed-bulletin .sector_content .line .prefix .black { background:#000; }
#content .detailed-bulletin .sector_content .line .prefix .yellow { background:#ffd300; }
#content .detailed-bulletin .sector_content .line .prefix .none { background:rgba(255,255,255,0.1); }
#content .detailed-bulletin .sector_content .line .prefix img { max-width:100%; height:auto; max-height:100%; width:auto; vertical-align:top; }
#content .detailed-bulletin .sector_content .line .name { overflow:hidden; padding:0 12px 0 0; }
#content .detailed-bulletin .sector_content .line .name .msg { font-style:italic; text-transform: none; font-size:12px; }
#content .detailed-bulletin .sector_content .line .state { float:right; text-transform:lowercase; font-size:12px; padding:4px 0 0; }
#content .detailed-bulletin .sector_content .line .state.open { color:#40c56d; }
#content .detailed-bulletin .sector_content .line .state.closed { color:#ff4c3a; }
#content .detailed-bulletin .sector_content .line .state.partial { color:#ffa900; }


/* Tablet / Mobile */
@media screen and (max-width:1024px) {

    /* Content top - context */
    #content-top #box-weather { margin:40px 0 0; }

    /* Miss Meteo */
    #content .box .miss-meteo .video { margin-left:260px; }
	
}


/* Mobile */
@media screen and (max-width:767px) {
	
	/* Weather box */
    #box-weather {
    	z-index:1;
    	height:152px;
    }
    #box-weather .push .title { font-size:20px; margin:10px 30px 5px; }
    #box-weather .push .aside .webcams,
    #box-weather .push .aside .more { display: none; }
    #box-weather .push .title .line-break { display:block; }
    #box-weather .push .cols .col { display: none; }
    #box-weather .push .cols:nth-child(1) .col:first-child,
    #box-weather .push .cols:nth-child(2) .col:first-child { display: inline-block; }
    #box-weather .push .maj { visibility: hidden !important; }

    /* Weather box - mode overlay */
    #box-weather.mode-overlay { background:#fff; }
    #box-weather.mode-overlay .list-pushs { overflow: visible; }
    #box-weather.mode-overlay .mobile-overlay-close { background-image:url('../img/btn-close-box-weather.png'); }
    #box-weather.mode-overlay .push .cols .col { display: inline-block; margin:11px 0 0; }
    #box-weather.mode-overlay .push .aside { margin:30px 0 0; display: block; }
    #box-weather.mode-overlay .push .aside .webcams { display: block; }
    #box-weather.mode-overlay .push .aside .more { display: block; }
    #box-weather.mode-overlay .push .cols .col { width:106px; }
    #box-weather.mode-overlay .push .maj { visibility:visible !important; position: static; margin:20px 0; }

	/* Info tables */
	#content .box .info-table .maj { margin-top: 20px; }
	#content .box .info-table .avalanche { text-align: center; }
	#content .box .info-table .avalanche span { margin: 10px 0 0; display: block; }
	#content .box .info-table .avalanche,
	#content .box .info-table .avalanche label { font-size: 14px; }
	#content .box .info-table .avalanche label { display: block; }
	#content .box .info-table .avalanche .icon { width: 50px; margin: 10px 0 0;  }
	#content .box .box-ouverture { width: 100%; }
	#content .box .info-table .temperature .temp img { margin-right:0; }
	#content .box .info-table .temperature .temp span { display:block; padding-top:5px; }

	/* Miss météo */
	#content .box .miss-meteo{ height:auto; background-size: 100px; background-position:50% 10px; padding-top:130px; }
	#content .box .miss-meteo .video{ width:auto; margin:120px 0 0; }
	
	/* Acces station */
	#content .acces-station #npy-wrapper-main-canvas-gmap { height:320px; }
	#content .acces-station .widget-road-condition { height:auto; }
	#content .acces-station .widget-road-condition .road-condition { margin-bottom:20px; }
	
	/* Ouvertures pistes */
	#content .box .ouverture { padding-bottom:0; }
	#content .box .box-ouverture li.margin { margin:0 12px 0 0; }
	#content .box .ouverture .title_state { margin-bottom:8px; }
	#content .box .ouverture .station_state  { font-size:18px; }
	
	#content .box .white-btn { width:100%; border-radius:0 !important; text-align:center; position:relative; }
	
	/* Detailed bulletin */
	#content .detailed-bulletin { padding:30px 0 20px; }
	#content .detailed-bulletin .subtitle { padding-left:24px; }
	#content .detailed-bulletin .sector_label { font-size:14px; border-radius:0; }
	#content .detailed-bulletin .sector_content .label { font-size:13px; }
	
}