html {
    font-size: 62.5%;
}

@font-face {
    font-family: Roboto;
    src: url(../fonts/Roboto-Black.ttf);
}


.leaflet-popup-content > table img {
    width: 300px;
}
.leaflet-popup-content > img {
    width: 300px;
}


        #map {
            width: 100%;
            height: 76vh;
            background-color: #fff;
            z-index: 1;
        }
        th {
            text-align: left;
            vertical-align: top;
        }
        .info {
            padding: 6px 8px;
            font: 14px/16px Arial, Helvetica, sans-serif;
            background: white;
            background: rgba(255,255,255,0.8);
            box-shadow: 0 0 15px rgba(0,0,0,0.2);
            border-radius: 5px;
        }
        .info h2 {
            margin: 0 0 5px;
            color: #777;
        }
        .leaflet-container {
            background: #fff;
            padding-right: 10px;
        }
        .leaflet-popup-content {
            width:auto;
            padding-right:10px;
        }
        .leaflet-tooltip {
            background: none;
            box-shadow: none;
            border: none;
        }
        .leaflet-tooltip-left:before, .leaflet-tooltip-right:before {
            border: 0px;
        }
        
        .fa, .leaflet-container, a {
            color: #000000 !important;
        }
        .leaflet-control-zoom-in, .leaflet-control-zoom-out,
        .leaflet-control-locate a,
        .leaflet-touch .leaflet-control-geocoder-icon,
        .leaflet-control-search .search-button,
         .leaflet-control-measure {
            background-color: #f8f8f8 !important;
            border-radius: 0px !important;
            color: #000000 !important;
        }
        .abstract {
            font: bold 18px 'Lucida Console', Monaco, monospace;
            text-indent: 1px;
            background-color: #f8f8f8 !important;
            width: 30px !important;
            color: #000000 !important;
            height: 30px !important;
            text-align: center !important;
            line-height: 30px !important;
        }
        .abstractUncollapsed {
            padding: 6px 8px;
            font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
            background-color:#f8f8f8 !important;
            color: #000000 !important;
            box-shadow: 0 0 15px rgba(0,0,0,0.2);
            border-radius: 5px;
            max-width: 40%;
        }
        .leaflet-touch .leaflet-control-layers,
        .leaflet-touch .leaflet-bar,
        .leaflet-control-search,
        .leaflet-control-measure {
            border: 3px solid rgba(245, 142, 8, 0.4) !important;
        }
        .leaflet-control-attribution a {
            color: #0078A8 !important;
        }
        .leaflet-control-scale-line {
            border: 2px solid #f8f8f8 !important;
            border-top: none !important;
            color: black !important;
        }
        .leaflet-control-search .search-button,
        .leaflet-container .leaflet-control-search,
        .leaflet-control-measure {
            box-shadow: none !important;
        }
        .leaflet-control-search .search-button {
            width: 30px !important;
            height: 30px !important;
            font-size: 13px !important;
            text-align: center !important;
            line-height: 30px !important;
        }
        .leaflet-control-measure .leaflet-control {
            width: 30px !important;
            height: 30px !important;
        }
        .leaflet-container .leaflet-control-search{
            background: none !important;
        }
        .leaflet-control-search .search-input {
            margin: 0px 0px 0px 0px !important;
            height: 30px !important;
        }
        .leaflet-control-measure {
            background: none!important;
            border-radius: 4px !important;
        }
        .leaflet-control-measure .leaflet-control-measure-interaction {
            background-color: #f8f8f8 !important;
        }
        .leaflet-touch .leaflet-control-measure
        .leaflet-control-measure-toggle,
        .leaflet-touch .leaflet-control-measure
        .leaflet-control-measure-toggle:hover {
            width: 30px !important;
            height: 30px !important;
            border-radius: 0px !important;
            background-color: #f8f8f8 !important;
            color: #000000 !important;
            font-size: 13px;
            line-height: 30px;
            text-align: center;
            text-indent: 0%;
        }
        .leaflet-control-layers-toggle {
            background-color: #f8f8f8 !important;
        }

        
        /* MY CUSTOMIZATION BEGINS HERE */
        
      
        *:hover {
            transition: all ease-in-out 2s;
        }

        .leaflet-control-layers:hover {
            transition: all ease-in-out 100ms;
        }

        #footer {
            position: fixed;
            display: flex;
            width: 100%;
            background-color: #eee;
            align-items: center;
            bottom: 0;
            z-index: 99;
        }

        #showCoordinatesDiv {
            display: flex;
            margin-left: 10px;
            width: 200px;
            height: 35px;
            border: 4px solid #c13584;
        }

        #captureCoordinatesDiv {
            display: flex;
            margin-left: 10px;
            height: 35px;
            width: 200px;
            border: 4px solid #c13584;
        }

        #showCoordinates {
            font-family:  Roboto, 'Open Sans', 'Helvetica Neue', sans-serif;
            font-size: 18px;
            opacity: 0.9;
            align-self: center;
        }
       
        #captureCoordinates {
            font-family:  Roboto, 'Open Sans', 'Helvetica Neue', sans-serif;
            font-size: 1.8rem;
            font-weight: 100;
            color: #02041a;
            align-self: center;
        }
        
        .main-left #title {
            position: relative;
            margin-top: 70px;
            padding: 5px 50px;
            color: blue; 
            text-align: center; 
            font-family:  Roboto, 'Open Sans', 'Helvetica Neue', sans-serif;
            font-size: 2.2rem; 
            font-weight: 700;
            line-height: 1.5;
            background-color: rgb(235, 136, 2, 0.3);
            z-index: 100;
        }

        #description {
            padding: 70px 60px 90px 60px;
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
        }

        #description p {
            font-family:  Roboto, 'Open Sans', 'Helvetica Neue', sans-serif;
            line-height: 1.75;
            font-size: 1.4rem;
            font-weight: 400;
            text-align: justify;
            color: #fff;
        }

        #description h2 {
            font-family:  Roboto, 'Open Sans', 'Helvetica Neue', sans-serif;
            font-size: 2.6rem;
            line-height: 1.5;
            font-weight: 700;
            text-align: center;
            color: #c0ddf0;
        }

        #footer p {
            font-family:  Roboto, 'Open Sans', 'Helvetica Neue', sans-serif;
            font-size: 1.4rem;
            color: #02041a;
            margin-left: 50px;
            text-align: justify;
        }

        .main {
            width: 100%;
            height: 500px;
        }
        .main-left {
            background-color: #fff;
            width: 60%;
            height: fit-content;
            float: left;
            padding-right: 10px;
           
        } 
        .main-right {
            background-color: #030a0e;
            width: 40%;
            height: 100vh;
            margin:0 0 0 60% ;
        
        }
        
        a {
            cursor: pointer;
            font-size: 14px;
            line-height: 18px;
            color: #fff;
            font-family:  Roboto, 'Open Sans', 'Helvetica Neue', sans-serif;
        }
        .header-main {
            position: fixed;
            top: 0;
            width: 100%;
            height: 60px;
            background-color:#fff;
            display: flex;
            justify-content: space-between;
            z-index: 1000;
        }
        
        .header-main-logo {
            width: fit-content;
            height: 100%;
            padding-left: 60px;
            display: flex;
        
        }
        
        .header-main-logo img {
            height: 40px;
            align-self: center;
        }
        
        .header-main-nav {
            width: fit-content;
            height: 100%;
        }
        
        .header-main-nav ul{
            margin-left: 30px;
            list-style: none;
            
        }
        
        .header-main-nav ul li{
            display: inline;
            float: left;
        }
        
        .header-main-nav ul li a {
            padding: 0 10px;
            font-family: Roboto, 'Open Sans', 'Helvetica Neue', sans-serif;
            line-height: 60px;
            color: #000 !important;
            display: block;
            height: 100%;
        }
        
        .header-main-nav ul li a:hover {
            color: #c13584 !important;
            transition: all ease-in-out 200ms;
        }
        
        .header-main-sm {
            width: fit-content;
            height: 100%;
            padding-right: 60px;  
            display: flex; 
            align-items: center;
            column-gap: 10px;
        }
        
        .header-main-sm-fb{
            width: 20px;
            height: 20px;
            background-image: url(../images/facebook_black.png);
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .header-main-sm-fb:hover{
            background-image: url(../images/facebook_colored.png);
            transition: all ease-in-out 200ms;
        }
        
        .header-main-sm-ln{
            width: 20px;
            height: 20px;
            background-image: url(../images/linkedin_black.png);
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .header-main-sm-ln:hover{
            background-image: url(../images/linkedin_colored.png);
            transition: all ease-in-out 200ms;
        }

        .burger-menu, 
        .burger-menu-btn {
            display: none;
        }

        
        /* MOBILE VERSION */
        @media  only screen and (max-width: 600px) {
            html, body {
                overflow-x: hidden;
              }
              body {
                width: auto;
                position: relative;
                -webkit-text-size-adjust: none;
              } 

              .burger-menu-btn {
                display: block;
                margin-left: 10px;
                width: 50px;
                height: 50px;
                background-image: url(../images/icons/menu.png), url(../images/icons/close.png);
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center, center left 50px;
            }
            
            .burger-menu {
                display: none;
                position: fixed;
                width: 50%;
                right: 0;
                height: fit-content;
                z-index: 900;
                background-color: #111;
            }
        
            .burger-menu ul {
                width: 100%;
                padding-top: 60px;
                display: flex;
                flex-wrap: wrap;
                align-content: flex-start;
            }
        
            .burger-menu ul li {
                flex-basis: 100%;
                border-top: 2px solid #000;
                color: #fff;
            }
        
            .burger-menu ul li:last-child {
                border-bottom: 2px solid #000;
            }
        
            .burger-menu ul li a {
                display: block;
                height: 100%;
                font-size: 3rem;
                padding: 30px 0;
                flex-basis: 100%;
                text-align: center;
                color: #fff !important;
            }

            .burger-menu-btn:hover {
                transition: all ease-in-out 200ms;
            }


            .header-main-logo {
                padding-left: 20px; 
            }
        
            .header-main-nav {
            display: none;
            }
        
            .header-main-sm {
                padding: 20px;
            }


              .leaflet-control-layers {
                position: relative;
                display: block;
                right: 230px;
                top: 10px;
              }

             
              #showCoordinatesDiv {
                display: none;
            }

              #showCoordinates {
                display: none;
            }
            
            #p-hover {
                display: none;
            }

            #captureCoordinates {
                align-self: center;
            } 

            
            #map {
                width: 600px;
                height: 50vh;
            }

            .main {
                display: block;
                height: 100vh;
            }

            .main-left {
                float: none;
                width: 100%;
                height: 60vh;
                margin: 0 0 0 0;
            }

            .main-left #title {
                margin-top: 70px;
                padding: 5px 25px;
                font-size: 2rem; 
                font-weight: 700;
                line-height: 1.3;
                background-color: rgb(235, 136, 2, 0.3);
                z-index: 100;
            }

            #description {
                padding: 30px 40px 70px 40px;
            }

            .main-right {
                width: 100%;
                margin: 0 0 0 0;
                height: fit-content;
                overflow-x: hidden;
                overflow-y: auto;
            }

            #footer {
                width: 100%;
                height: fit-content;
            }
    
        }