/* FONTS
================================================== */

@import url('https://fonts.googleapis.com/css?family=Titillium+Web:400,600,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Teko:300,400,500,600,700&display=swap');


/* GENERAL
================================================== */

html, body{ font:400 14px/20px 'Titillium Web', sans-serif; padding:0; margin:0; height:100%; }
h1, .h1 { font: 400 36px/65px 'Teko', sans-serif; text-align:center; color:#006180; text-transform: uppercase; margin:0;  }


.hidden { display:none; }

/* LOADER
================================================== */
#loader{ position: absolute; top:0; left:0; z-index:1009; width:100%; height:100%; background-color:#fff; }
#loader .spinner { position: absolute; top:calc(50% - 40px); left:calc(50% - 40px); z-index:1010; width:80px; height:80px;
	border:12px solid rgba(0,0,0,.15); border-top: 12px solid #c30000; border-radius: 50%;
	animation: spin 1s linear infinite; transform: translate(-50%, -50%); }


@keyframes spin {
	0% { transform: rotate(0deg);}
	100% { transform: rotate(360deg);}
}


/* ENTÊTE
================================================== */

header #menu_bar { max-height:65px; background:#FFF;  }
header .logo {position:absolute; top:5px; right:15px; max-height:55px; margin:0; padding:0;  }
.hamburger { position:absolute; width:25px;  top:0; left:0; color:#fff; padding:20px; cursor:pointer; background:#c30000; }
.hamburger-box { float:left; position:relative; width:25px; height:25px; text-indent:0; }
.hamburger-box::before { float:left; font:normal 25px/25px 'font-scopikatz'; content:"\eb3a"; }
.hamburger--arrow .hamburger-box::before { font:normal 25px/25px 'font-scopikatz'; content:"\ea88"; }

#sidebar { position: absolute; top: 0; left: 0; }



#menu_toggle, #volcan_toggle, #info_toggle { position:absolute; top:0; left:0; z-index: 10000; width:300px; height:100vh; transform: none; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); }
#volcan_toggle, #info_toggle { background:rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(20px); box-shadow:2px 0 6px rgb(0 0 0 / 15%); }



#menu_toggle.collapsed, #volcan_toggle.collapsed, #info_toggle.collapsed { transform-origin: 0% 0%; transform: translate(-100%, 0); }
#menu_toggle .menu_toggle_bar, #volcan_toggle .menu_toggle_bar, #info_toggle .menu_toggle_bar { font:400 21px/65px 'Teko', sans-serif; text-indent:70px; color:#FFF; background:#c30000; }

.input_search_wrapper { position:relative; }
.input_search_wrapper::after { position:absolute; right:5px; top:0; font:normal 24px/38px 'font-scopikatz'; content:"\ea04"; color:rgba(0,0,0,.15); }
#menu_toggle .search { margin:15px; padding:15px; border-radius:8px; background:rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 2px 6px rgb(0 0 0 / 15%); }
#menu_toggle .search label { font:400 21px/30px 'Teko', sans-serif; text-transform:uppercase; color:#006180; }

#menu_toggle .search span { display:block; width:100%; }
#menu_toggle .search input[type="text"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width:calc(100% - 12px); font:400 15px/36px 'Titillium Web', sans-serif; color: #000; padding:0 5px; border:solid 1px #fff; border-radius:8px; background-color: #fff; transition: all 0.4s ease; outline: none; box-shadow: 0 1px 3px rgb(0 0 0 / 15%); }
#menu_toggle .search input[type="text"]:hover { border:1px solid #006180; }



#volcan_toggle_model, #info_toggle_model { display: none; }


/* Cases à cocher volcans */

#menu_toggle input[type="checkbox"] { display:none; }

#menu_toggle .filter_bloc { position: relative; display: block; border-bottom: dashed 1px rgba(0,0,0,.3); }
#menu_toggle .filter_bloc i.icon_info { position: absolute; top:9px; right:5px; z-index: 100; width:20px; font:400 16px/20px 'Titillium Web', sans-serif; color:#fff; text-align:center; border-radius:20px; background:#006180;  cursor:pointer;  }

#menu_toggle .filter_bloc label { display:block; font:400 15px/17px 'Titillium Web', sans-serif; text-indent:35px; color:#666; padding:10px 0; transition: all 0.4s ease; cursor:pointer; }
#menu_toggle .filter_bloc label:hover { color:#006180; background-color:rgba(0,97,128,0.1); }
#menu_toggle .filter_bloc label:before { position:absolute; left:0; top:8px; content:""; height:0; width:0; margin:0 4px; border-right:10px solid transparent; border-bottom:18px solid rgba(0,0,0,.3); border-left:10px solid transparent; }
#menu_toggle .filter_bloc.filter_actus label:after { position:absolute; top:11px; left:17px; content:""; height:9px; width:9px; border:solid 1px #fff; border-radius:50%; background:red;  }

#menu_toggle .filter_bloc label.checked { color:#000; }

#menu_toggle .filters_activite { margin:15px; padding:15px; border-radius:8px; background:rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 2px 6px rgb(0 0 0 / 15%); }
#menu_toggle .filters_activite .subtitle { font:400 21px/30px 'Teko', sans-serif; text-transform:uppercase; color:#006180; }
#menu_toggle .filter_bloc.filter_activite_1 label.checked:before { border-bottom:18px solid #fbd22e; }
#menu_toggle .filter_bloc.filter_activite_2 label.checked:before { border-bottom:18px solid #f47138; }
#menu_toggle .filter_bloc.filter_activite_3 label.checked:before { border-bottom:18px solid #ca2639; }

#menu_toggle .filters_actualites { margin:15px; padding:15px; border-radius:8px; background:rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 2px 6px rgb(0 0 0 / 15%); }
#menu_toggle .filters_actualites .subtitle { font:400 21px/30px 'Teko', sans-serif; text-transform:uppercase; color:#006180; }
#menu_toggle .filter_bloc.filter_actus label.checked:before { border-bottom:21px solid #006180; }

#menu_toggle .filters_contexte { margin:15px; padding:15px; border-radius:8px; background:rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 2px 6px rgb(0 0 0 / 15%); }
#menu_toggle .filters_contexte .subtitle { font:400 21px/30px 'Teko', sans-serif; text-transform:uppercase; color:#006180; }
#menu_toggle .filters_contexte .filter_bloc label { text-indent:30px; }
#menu_toggle .filters_contexte .filter_bloc label:before { top:10px; height:14px; width:14px; margin:0 4px; border:solid #666 1px; }
#menu_toggle .filter_bloc.filter_contexte_1 label.checked:before { background:#006180; }
#menu_toggle .filter_bloc.filter_contexte_2 label.checked:before { background:#006180; }
#menu_toggle .filter_bloc.filter_contexte_3 label.checked:before { background:#006180; }



#volcan_toggle .volcan_toggle_content { height:calc(100vh - 65px ); padding:15px; overflow: scroll; }
#volcan_toggle .volcan_toggle_content .line { display:block; padding-bottom:10px; margin-bottom:10px; border-bottom: dashed 1px rgba(0,0,0,.15);  }
#volcan_toggle .volcan_toggle_content .line.hidden {display:none;}
#volcan_toggle .volcan_toggle_content .line .label { display:block; font:400 21px/24px 'Teko', sans-serif; text-transform:uppercase; color:#006180;  }

#info_toggle .info_toggle_content { height:calc(100vh - 65px ); padding:15px; overflow: scroll; }

/* MAP
================================================== */
#content{
	position: relative;
}

#map { width: 100%; height:calc(100vh - 65px ); }

#map_filters { position: absolute; top: 50px; right: 50px; z-index: 10000; }

a.zoom-reset { display: block; float:left!important; width:30px; height:30px; line-height:30px; text-decoration: none; text-align: center; color: black; margin:2px;  border-bottom: 1px solid #ccc; border-radius:2px;  background-color:#fff; overflow:hidden; }

a.zoom-reset::before{ float:left; width:30px; content: "\eb2b"; font:normal 24px/30px 'font-scopikatz' !important; }



#map .map_activite_1, #map .map_activite_2, #map .map_activite_3 { float:left; position:relative; width:20px; height:18px; }
/*#map .map_activite_1:before { position:absolute; left:0; top:0; content:""; height:0; width:0; border-right:10px solid transparent; border-bottom:18px solid #fbd22e; border-left:10px solid transparent; }*/
#map .map_activite_1:before { position:absolute; left:0; top:0; content:""; width:22px; height:19px; background: transparent url(images/triangle-jaune.png) no-repeat; background-size: contain; }
/*#map .map_activite_2:before { position:absolute; left:0; top:0; content:""; height:0; width:0; border-right:10px solid transparent; border-bottom:18px solid #f47138; border-left:10px solid transparent; } */
#map .map_activite_2:before { position:absolute; left:0; top:0; content:""; width:22px; height:19px; background: transparent url(images/triangle-orange.png) no-repeat; background-size: contain; }
/*#map .map_activite_3:before { position:absolute; left:0; top:0; content:""; height:0; width:0; border-right:10px solid transparent; border-bottom:18px solid #ca2639; border-left:10px solid transparent; } */
#map .map_activite_3:before { position:absolute; left:0; top:0; content:""; width:22px; height:19px; background: transparent url(images/triangle-rouge.png) no-repeat; background-size: contain; }


#map .map_actus::after { position:absolute; top:5px; left:14px; content:""; height:10px; width:10px; border:solid 1px #fff; border-radius:50%; background:red;  }

.volcan_actualites { }
.volcan_actualites .date {display:block; }
.volcan_actualites .description { display:block; margin-bottom:10px;  }
.volcan_actualites br { display:none; }

@media (max-width:768px) {
	
	h1, .h1 { font: 400 28px/50px 'Teko', sans-serif; }
	.hamburger {  padding:12.5px; }
	header .logo { max-height: 40px; }
	#menu_toggle .menu_toggle_bar, #volcan_toggle .menu_toggle_bar, #info_toggle .menu_toggle_bar { font: 400 21px/50px 'Teko', sans-serif; }

}

@media (max-width:480px) {
	h1, .h1 { font: 400 24px/50px 'Teko', sans-serif; }
	header .logo { display:none; }

}

@media (max-width:320px) {
	h1, .h1 { font: 400 21px/50px 'Teko', sans-serif; }
	header .logo { display:none; }

}

/* POP-UP
================================================== */
#noresults_dialog.hidden{ display: none; transition: all .3s ease-in; }
#noresults_dialog{ display: block; position:fixed; top: 0; left: 0; z-index:10000; width:100%; height:100%; background-color: rgba(72, 79, 115, .8); }
#noresults_dialog .dialog  { display: block; position: relative; top: 50%; z-index: 99; width:370px; max-width: 100%; margin: 0 auto; border-radius:12px; background:#fff; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-perspective: 1200px; -o-perspective: 1200px; -ms-perspective: 1200px; perspective: 1200px; }
#noresults_dialog .dialog .title_wrapper { position:relative; text-align:center; background: #c30000; font: 400 21px/65px 'Teko', sans-serif; color: #FFF; border-radius: 12px 12px 0 0; }
#noresults_dialog .dialog button.close_btn { position:absolute; top:0; right:15px; color: #FFF; padding:0; margin:0; border:none; background:transparent; cursor:pointer; }
#noresults_dialog .dialog button.close_btn::before { font:normal 30px/65px 'font-scopikatz'; content: "\eacb"; color: #FFF; }
#noresults_dialog .dialog .content { padding: 30px; }

.results_like { font: 400 15px/17px 'Titillium Web',sans-serif; text-indent: 35px ; color: #666; }
.results_like ul { list-style:none; margin:10px 0; padding:0;  }
.results_like ul li a { color:#c30000; }