@font-face {
    font-family: "transport_heavy";
    src: url("fonts/Transport Heavy.ttf");
}
@font-face {
    font-family: "transport_light";
    src: url("fonts/Transport Medium Greek.ttf");
}

body {
    padding-left: 14px;
    padding-right: 14px;
    margin:0;
    font-family: Inter, Helvetica, Arial;
    padding-bottom:80px;
}

.site{
    max-width: 1400px;
    margin: 21px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.header{
    font-family: transport_heavy, "Helvetica Bold", Arial;
    height:60px;
    font-size:23pt;
    border-bottom: 4px black solid;
    margin-bottom:20px;
    padding-top:20px;
    display:flex;

}

.site-name{
    max-width: 100%;
    overflow:hidden;
    margin:0 auto 0 0;
}

.navigation{
    display: block;
    flex: 0 1 auto;
}

.navigation a{
    margin-left:1ex;
    font-size:15pt;
    color:black;
    text-decoration: none;
}

.content{
    max-width: 800px;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    font-size:14pt;
    line-height: 1.55;
    text-align: left;
}

.content-full{

    margin-left: auto;
    margin-right: auto;
    font-size:14pt;
    line-height: 1.55;
    text-align: left;
}

img.graph{
    width:600px;
    max-width:100%;
    margin-left: auto;
    margin-right: auto;
    margin-top:10px;
    margin-bottom:10px;
}

p.image{
    text-align:center;
}

img.faq-sign{
    height:100px;
    max-width:100%;
    margin: 10px 20px 10px 20px;
}
img.faq-sign-tall{
    width:100px;
    max-width:100%;
    margin: 10px 20px 10px 20px;
}

blockquote{
    background-color:#eee;
    border-radius:10px;
    padding:20px;
    color:#222;
}

div.figure{
    text-align:center;
}

div.image{
    display:inline-block;
    margin: 10px 20px 10px 20px;
}

div.caption{
    font-size: small;
    line-height: 1.1;
    max-width:200px;
    margin-left:auto;
    margin-right:auto;
}

figure{
    display:inline-block;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

h1{
    font-family: transport_heavy, "Helvetica Bold", Arial;
    font-size:18pt;
    text-align:left;
    margin-bottom:8px;
    font-weight: normal;
}

h2{
    font-family: transport_heavy, "Helvetica Bold", Arial;
    font-size:16pt;
    text-align:left;
    padding-top:10px;
    font-weight: normal;
}

.tiles{
    text-align: left;
}

a.tile-link{
    text-decoration: none;
    color:black;
}

.tile{
    display:inline-block;
    vertical-align:top;
    position:relative;
    width:100px;
    height:120px;
    background-color: #eee;
    border: 1px solid #bbb;
    border-radius: 5px;
    text-align: center;
    padding-top:5px;
}

img.sign{
    max-width:100px;
}

.found{
    /*border-color:#5f9533;*/
    border-color:#49a200; /*#0056a2;*/
    background-color:#49a200;/*#0056a2;*/
    border-width:2px;
    margin:4px;
    padding:0;
    height:125px;
}

.missing{
    margin:5px;
}

.triangle{
    width:90px;
}

.triangle-large{
    width:150px;
}

.large-number{
    font-size:14px;
}
.large-number-large{
    font-size:23px;
}
.metres{
    margin-left:2px;
}
.triangle-text {
    font-size:12px;
    line-height: 16px;
    position:absolute;
    top:46px;
    width:100px;
    left: 50%;
    margin-left: -50px;
    text-align:center;
    font-family: transport_heavy, "Helvetica Bold", Arial;
}
.triangle-text-large {
    font-size:20px;
    line-height: 27px;
    position:absolute;
    top:83px;
    width:100px;
    left: 50%;
    margin-left: -50px;
    text-align:center;
    font-family: transport_heavy, "Helvetica Bold", Arial;
}
.label{
    font-family:Arial;
    margin-top:8px;
    color:#222;
}
.label-found{
    font-family: Arial;
    margin-top:2px;
    color:white;
}
.label-found2{
    font-family: Arial;
    padding-top:4px;
    color:white;
    background-color:#49a200;
    width:185px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    bottom:0;
    position:absolute;
    height:30px;
}
.label-search2{
    font-family: Arial;
    padding-top:4px;
    color:white;
    background-color:#237cc9;
    width:185px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    bottom:0;
    position:absolute;
    height:30px;
}
.label-search-index{
    font-family: Arial;
    color:white;
    background-color:#237cc9;
    width:100px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    bottom:0;
    position:absolute;
    height:25px;
}
.label-search-index-question{
    background-color:#7a5139;
}
span.confirmed-to-find-counter{
    font-family: transport_light, "Helvetica", Arial;
    vertical-align: 0px;
    font-size:smaller;
}
span.confirmed-to-find-counter-x{
    font-family: Arial;
    vertical-align: 1px;
    font-size:smaller;
    margin-right:1px;
}
.label-question-index{
    font-family: Arial;
    color:white;
    background-color:#9f9f9f;
    width:100px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    bottom:0;
    position:absolute;
    height:25px;
}
i.search-index{
    margin-top:4px;
}
i.search-large{
    margin-top: 3px;
}

div.height-range-container{
    display:flex;
    margin-top:15px;
}

h1.height-range{
    max-width:100%;
    overflow:hidden;
    margin:0 auto 0 0;
}

.counter{
    display: block;
    flex: 0 1 auto;
    font-family: transport_heavy, "Helvetica Bold", Arial;
    font-size:15pt;
    margin-top:3px;
}

#map {
  /*height: 400px;  /* The height is 400 pixels */
  height:80%;
  width: 100%;  /* The width is the width of the web page */
  text-align:left;
 }

 img.big-photo{
     display:inline-block;
     vertical-align: top;
     width: 400px;
     margin-right:15px;
     /*max-width: 100%;*/
     margin-bottom: 10px;
     margin-top:5px;
 }

 img.small-photo{
     width:150px;
     padding-bottom:15px;
 }

 div.infobox{
     text-align: center;
     display:inline-block;
     vertical-align: top;
     background-color:#eee;
     border-radius:15px;
     padding:15px;
     padding-right:20px;
     font-family: transport_heavy, "Helvetica Bold", Arial;
     font-size:15pt;
     height:327px;
     width: 395px;
     max-width: 95%;
     margin-bottom:15px;
 }

 div.infobox a{
     color: #0078A8;
     text-decoration: none;
 }

 div.infobox1{
     position: relative;
     display:inline-block;
     vertical-align: top;
     text-align: center;
     background-color:#eee;
     border-radius:15px;
     padding:15px 0px 15px 0px;
     margin-right:20px;
     font-family: transport_heavy, "Helvetica Bold", Arial;
     font-size:15pt;
     height:327px;
     width: 185px;
     max-width: 95%;
     margin-bottom:15px;
 }

 div.icon_block{
     width:38px;
     display:inline-block;
     vertical-align: top;
     margin-bottom:1ex;
     text-align: center;
     font-size: 30px;
     margin-right: 5px;
 }

.fa-check{
    margin-top:3px;
}
.fa-question-circle, .fa-search{
    margin-top:12px;
}

img.map-legend{
    height: 25px;
    margin-left:-21px;
    margin-bottom:-11px;
}
div.map-legend{
    display:block;/*
    vertical-align: top;
    background-color:#eee;
    border-radius:15px;
    padding:15px;
    padding-left:20px;
    width: 365px;
    max-width: 95%;*/
    text-align:center;
    line-height:1;
}
div.legend-block{
    display:inline-block;
    width:150px;
    vertical-align: top;
    padding-left:21px;
    margin-top:15px;
    text-align:left;
}

span.frac_top{
    font-size:10.5pt;
    vertical-align:5px;
}
span.frac_bottom{
    font-size:10.5pt;
    vertical-align:-1px;
}

/* Popup labels for the map */
div.leaflet-popup-content {
    margin:10px 7px;
}
.leaflet-popup-content a{
    text-decoration-style: dotted;
}

img.label-icon{
    height:25px;
    /*float:left;*/
}

div.label-icon{
    margin-right:7px;
}

div.label-icon, div.label-text{
    display:inline-block;
}

div.label{
    font-family: Inter, Helvetica, Arial;
    min-width: 100px;
}

/* Map buttons */
div.map-buttons{
    float: right;
    font-family: transport_heavy, "Helvetica Bold", Arial;
    margin-top:0.5ex;
}
div.map-button{
    display:inline-block;
    margin-left:10px;
    color:#000;
}
div.map-button a{
    color:#999;
    text-decoration: none;
}

@media only screen and (max-width: 600px) {
  body {
    max-width:600px;
  }
}