/*  sass --watch scss/default.scss css/default.css  */

body {
    background: #fefefe;
    font-family: "Montserrat",Helvetica,Roboto,Arial,sans-serif;
}

h1, .h1, h2, .h2, h3, .h3, h4, .site-title h1, .h4, h5, .preview-block h4, .h5, h6, .h6 {
font-family: "Montserrat",Helvetica,Roboto,Arial,sans-serif;
}

.width-100{
	width:100%;
}



.property dt {
    text-transform: uppercase;
    font-weight: 300;
    font-size: 85%;
    color: #777;
}

.resource-list .resource {
    margin: 1rem 0;
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 1rem;
}


.browse-item-data {
   /* padding: 0px 5px*/
    padding: 9px 10px;
}

.browse-item-data.topic {
    font-weight: 800
}

.browse-audio audio {
    width: 62px;
    padding: 0px 10px
}

.browse-audio.spacer {
    width: 62px;
    padding: 0px 10px
}

.browse-rows {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
}

.browse-rows .audio-play-btn {
    width: 32px;
    margin-right: 20px
}

.browse-rows .audio-paused {
    display: none;
    cursor: pointer
}

.browse-rows .audio-paused:hover {
    opacity: .5
}

.browse-rows .audio-playing {
    display: block;
    cursor: pointer
}

.browse-rows .audio-playing:hover {
    opacity: .5
}

.top-bar, .top-bar ul {
    background-color: #fff;
}

.site-title img {
    max-height: 9rem;
    width: auto;
}

.header-short-titles {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.header-short-titles h1 {
}

.header-short-titles p {
  margin: 0; /* Remove default margin */
  border-left: 2px solid #be4100;
  margin-left: 30px;
  padding-left: 30px;
}

.marker-cluster-small {
            background-color: rgba(244, 160, 6, 0.2);
        }
        
        .marker-cluster-small div {
            background-color: rgba(244, 160, 6, 0.6);
        }
        
        .marker-cluster-medium {
            background-color: rgba(232, 93, 4, 0.2);
        }
        
        .marker-cluster-medium div {
            background-color: rgba(232, 93, 4, 0.6);
        }
        
        .marker-cluster-large {
            background-color: rgba(208, 0, 0, 0.2);
        }
        
        .marker-cluster-large div {
            background-color: rgba(208, 0, 0, 0.6);
        }
        /* IE 6-8 fallback colors */
        
        .leaflet-oldie .marker-cluster-small {
            background-color: rgb(245, 255, 242);
        }
        
        .leaflet-oldie .marker-cluster-small div {
            background-color: rgb(241, 250, 238);
        }
        
        .leaflet-oldie .marker-cluster-medium {
            background-color: rgb(188, 218, 247);
        }
        
        .leaflet-oldie .marker-cluster-medium div {
            background-color: rgb(168, 245, 220);
        }
        
        .leaflet-oldie .marker-cluster-large {
            background-color: rgb(110, 196, 250);
        }
        
        .leaflet-oldie .marker-cluster-large div {
            background-color: rgb(69, 123, 157);
        }


.marker-cluster {
	background-clip: padding-box;
	border-radius: 20px;
	}
.marker-cluster div {
	width: 30px;
	height: 30px;
	margin-left: 5px;
	margin-top: 5px;

	text-align: center;
	border-radius: 15px;
	font-family:"Montserrat",Helvetica,Roboto,Arial,sans-serif;
        font-size:14px;
	}
.marker-cluster span {
	line-height: 30px;
	}

.leaflet-container {
    font-family: "Montserrat",Helvetica,Roboto,Arial,sans-serif !important;
}

@media screen and (min-width: 1200px) {
  .leaflet-top .leaflet-control {
		margin-top: 25px;
	}
  /* Additional styles specific to extra large devices */
}

@media screen and (max-width: 1199px) {
  .leaflet-top .leaflet-control {
		margin-top: 25px;
	}
  /* Additional styles specific to extra large devices */
}

/* Media query for mobile devices */
@media (max-width: 767px) {
 .header-short-titles {
    flex-direction: column;
    align-items: center;
    margin-top: 8px;
}

  .header-short-titles h1 {
    border-right: none; /* Remove the border on mobile */
    padding-right: 0;   /* Remove padding on mobile */
    margin-right: 0;    /* Remove margin on mobile */
    margin-bottom: 10px; /* Add spacing between h1 and p on mobile */
  }
  .header-short-titles p{
    border-left: 0px solid #be4100;
    margin-left: 0px;
    padding-left: 0px;
  ]

.search-input-a-s {
    width: 58% !important;
}
}

@media screen and (max-width: 768px) {
    .banner-img-holder {
        display: none;
    }
}