/*******************************************
 *********** GENERIC ELEMENT ***************
 ******************************************/
html, body
{
    height: 100% ;
    overflow-x: hidden;
    margin: 0;
    padding:0;
    
    font-family: 'Quicksand', sans-serif;
}

h1{
    color: #009fe3;
    text-align: center ;
    font-size: 32px ;
}

h2{
    color: #009fe3;
    text-align: left ;
    font-size: 20px ;
}

img.icon {
    max-width: 25px ;
    vertical-align: middle ;
}

/******************************************
 ************** TOOLTIP *******************
 *****************************************/

.tooltip {
    position: relative;
    display: inline;
}

.tooltip  .tooltiptext{
    visibility: hidden ;
    width: 300px ;
    background-color: lightgray ;
    color: #000000 ;
    text-align: justify ;
    border-radius: 6px ;
    padding-top: 5px;
    padding-bottom: 5px ;
    padding-left: 5px ;
    padding-right: 5px ;
    font-size: small ;
    
    position: absolute ;
    z-index: 1 ;
}

.tooltip .tooltiptextleft{
    top:-75px;
    right: 100%;
}

.tooltip:hover  .tooltiptext {
    visibility: visible ;
}



/****************************************
 ************ PAGE STRUCTURE ************
 ***************************************/

.sections-ctn{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between ;
}

.section-container{
    display: inline-block;
    vertical-align: top ;
    
    flex: 0 0 auto;
    max-width: 100%;
}

@media only screen and (max-width: 78rem){
    .section-container{
        flex: 1 0 auto ;
    }
}
    

.section{
    display: flex;
    flex-flow: column nowrap;
    
    margin: 5px;
    border: 1px #009fe3 solid;
    border-radius: 15px 0px 0px 0px;
    
    height: calc(100% - 10px - 2px);
}

.section-header-container{
    flex: 0 0 auto;
    
    border-radius: 15px 0px 0px 0px;
    background: #009fe3;
    padding-left: 10px;
    font-size: 18px;
    color: white;
}

div.section-header{
    height: 30px;
    padding: 4px;
}

div.section-header-icon{
    display: inline-block;
    vertical-align: middle;
    padding-right: 15px;
    height: 100%;
}

img.section-header-icon{
    height: 100% ;
}

div.section-header-title{
    display: inline-block;
}

/*********** map ******************/


div.station-location-container{
    min-height: 6rem ;
    flex-basis: 30rem;
}

div.station-location{
	flex: 1 1 auto;
	display: flex;
	flex-flow: column nowrap;
    
    margin: 5px ;
}

div.location-number{
    flex: 0 0 auto;
    
    width: calc(100% - 5px - 5px) ;
    margin: 5px;
}

span.latlong{
    display: inline-block;
    width: 66%;
    text-align: left;
}

span.altitude{
    display: inline-block;
    width: 34%;
    text-align: right;
}

#location-map{
    flex: 1 1 auto;
    min-height: 300px;
}


/******** station metadata *******/
div.metadata-container{
    flex-basis: 30rem;
}

div.metadata{
    padding-left: 20px ;
    padding-right: 20px ;
}

.description-text{
    text-align: justify;
}


/******* badges **********/
div.badges-container{
    flex-basis: 18rem; /* contains 3 badges per row */
    vertical-align: top;
}

div.badges{
    padding-left: 20px;
    padding-right: 20px;
}

img.badge-icon{
    height: 100px;
    padding: 5px;
}


/******* characteristics ****/
div.characteristics-container{
    flex-basis: 30rem;
}

div.characteristics{
    padding-left: 20px;
    padding-right: 20px;
}


/********** station images ********/
div.station-presentation-images{
    display: inline-block ;
    flex-basis: 30rem;
    /*height: 300px ;*/
    vertical-align: top ;
}

div.station-images{
    padding: 5px;
}

div.station-images-container{
    box-sizing: inherit;
    position: relative;
    
    margin: auto;
}



/******************************************
 ************* SLIDE IMAGES ***************
 *****************************************/
div.station-slides{
    max-width: 530px ;
    height: 300px ;
    position: relative ;
    justify-content: center;
    margin: auto;
}

img.slide-image{
    max-height: 100% ;
    max-width: 100% ;
    object-fit: contain;
}

button.slide-button{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
    border: none;
    display: inline-block;
    outline: 0;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: white;
    background-color: black;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
}

button.slide-button:hover{
    color: #000 !important;
    background-color: #ccc !important;
}

button.display-back{
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(0%,-50%);
    -ms-transform: translate(-0%,-50%);
}

button.display-next{
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0%,-50%);
    -ms-transform: translate(0%,-50%);
}

div.slide-caption{
    position: absolute ;
    left: 0 ;
    top: 0 ;
    background: black ;
    color: white ;
    padding: 3px;
}