@font-face {
    font-family: EagleLake;
    src: url(EagleLake-Regular.ttf);
}



html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
div.img-slide{
	width: 100%;
	height: calc(100% - 80px);
	position:relative;
	overflow:hidden;
}
body h1{
    height: 80px;
    text-align: center;
    display: block;
    margin: 0;
    padding: 20px 0;
    background-color: #E8E9F3;
    color:  #2E2E3A;
    font-family: EagleLake;
    cursor: pointer;
}
div#buttons{
    position: absolute;
    top:20px;
    left:15px;
    font-family: EagleLake;
    display: flex;
    align-items: center;
}
div#buttons button{
    height:40px;
    width:40px;
    border-radius:20px;
    background-color: white;
    border-color: black;
    border:none;
    margin-left: 5px;
}
div#buttons button#route {
    background: no-repeat center/100% url(route.svg);
    background-color: white;
    filter: invert(70%);
}
div#buttons button#densite {
    background: no-repeat center/100% url(densite.svg);
    background-color: white;
}
div#buttons button#densite_incr {
    background: no-repeat center/100% url(densite_incr.svg);
    background-color: white;
}
div#buttons button#map_toggle {
    filter: invert(90%);
}

div#welcome{
    position: absolute;
    top: 20%;
    bottom: auto;
    left: 15%;
    right: 15%;
    padding: 20px;
    border-radius: 15px;
    background-color: white;
    z-index: 2;
    box-shadow: 0px 0px 10px 5px;
}
div#welcome h2 {
    font-family: EagleLake;
    margin-bottom: 1em;
}
div#welcome h4, div#welcome strong {
    font-family: EagleLake;
    margin-bottom: 0.5em;
}
div#welcome p {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align: justify;
}
div#welcome em {
    font-family: EagleLake;
}
div#welcome button{
    background-color: #BC5D2E;
    color: white;
    border: none;
    border-radius: 0.5em;
    padding: 0.5em 1em;
    font-family: EagleLake;
    margin-top: 1em;
}
div.img-slide div.slide{
	height: 100%;
	width: 100%;
	position:absolute;
	top:0px;
	left:0px;
}
.folium-map{
    z-index: 0;
}
div.folium-map{
    height:100%;
    width:100%;
}
div.overlay{
    background-color: #fff8;
    z-index: 1000;
    pointer-events: auto;
}
.full-width{
    width: 100%;
}
div.slider{
    position: absolute;
    height: 100%;
    width: 10px;
    background-color: #3338;
    z-index: 1
}
div.handle{
    height:3em;
    width:3em;
    border-radius:1.5em;
    margin-top:-1.5em;
    background-color: black;
    position: absolute;
    z-index: 2;
    color: white;
    text-align: center;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: grab;
}
div.year_indicator{
    font-size: 2em;
    position: absolute;
    top: 5px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 4em;
    text-align: center;
    margin-left: -2em;
    z-index: 1; 
    border-radius: 0.35em;/*
    background-color: white;
    border: 2px;
    border-style: solid;
    border-color: magenta;*/
}
div#year1875{
    background-color: #CEEAF7;
}
div#year1928{
    background-color: #F0CF65;
}
div#year1975{
    background-color: #65B8A8;
}
div#year2025{
    background-color: #BC5D2E;
}

div#popup{
    position: absolute;
    z-index: 3;
    display: none;
    overflow : scroll;
    left : 10%;
    right : 10%;
    background-color : white;
    border-radius: 10px 10px 0px 0px;
    padding : 20px;
}

div#popup_header{
    display: flex;
    flex-direction : row;
    justify-content : space-between;
    margin-bottom: 10px;
    font-family: EagleLake;
}
div#popup_buttons{
    display:flex;
    flex-direction: row;
    align-items: center;
}
div#popup_buttons button{
    background-color: white;
    margin: 0 4pt;
}
div#popup_info {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align: justify;
}
div#popup_info img {
    float : right;
    width: 40%;
    border-radius: 15px;
    margin : 0 0 1em 1em;
}
div#popup_info img.active{
    width: 90%;
}

div#popup_info .galery {
    display: flex;

}
blockquote {
    font: 14px/20px italic Times, serif;
    padding: 8px;
    border-top: 1px solid #e1cc89;
    border-bottom: 1px solid #e1cc89;
    margin: 5px;
    background:  top left no-repeat url(images/openquote1.gif), bottom right no-repeat url(images/closequote1.gif), #faebbc;
    text-indent: 23px;
    width: calc(60% - 1em);
}

.croix {
    position: relative;
    width: 25px;
    height: 25px;
    border:none;
}

.croix::before,
.croix::after {
    content: '';
    position: absolute;
    top: 0;
    left: 11px;
    width: 3px;
    height: 25px;
    background-color: pink;
}

.croix::before {
    transform: rotate(45deg);
}

.croix::after {
    transform: rotate(-45deg);
}
.fleche-haut, .fleche-bas{
    width: 0;
    height: 0;
    padding: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

.fleche-haut {
    border-top: none;
    border-bottom: 10px solid pink;
}
.fleche-bas {
    border-bottom: none;
    border-top: 10px solid pink;
}

.move_map {
    border: none;
    background: no-repeat center url(icon_rose.png);
    width: 25px;
    height: 25px;
}