@charset "UTF-8";


/*CSS Document */

/*
/*    SECTION 1
/*	  1.1 – General
/*    1.2 - Map Setup
/*    1.3 - Pop Up Typography
/*    1.4 – Pop Up Structure
/*    1.5 - Attribution

/* =================== */
/*      SECTION 1      */
/* =================== */
/* 1.1 - General */

html:focus{
	-webkit-tap-highlight-color: transparent;
	outline: none;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
}

body{
	background-color: #063046;
	-webkit-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

img{
	height: 100%;
  width: auto;
	vertical-align: middle;
}


.creditwrapper {
	margin-top: 10px;
	margin-left: 10px;
}

p.credits{
	font-family: calibri, arial, helvetica, sans-serif;
	font-weight: 400;
	font-size:16px;
	color: #fff;
}

a.credits{
	font-family: calibri, arial, helvetica, sans-serif;
	font-weight: 400;
	font-size:16px;
	color: #fff;
}

.mapboxgl-ctrl-logo {
    display: none !important;
}




/* 1.2 - Map Setup */

#mapwrapper{
	position:relative;
	height: 80vh;
	margin-top: 40px;
	margin-left: 10px;
	margin-right: 10px;
	max-width: 2000px;
}

#map{
	position:absolute;
	top:0;
	bottom:0;
	width:100%;
}

@media (min-width: 786px){
	#mapwrapper{
		height: 85vh;
		margin-left: 80px;
		margin-right: 80px;
/*		margin-bottom: 40px;*/
	}
}

@media (min-width: 2000px){
	#mapwrapper{
		margin-left: unset;
		margin-right: unset;
		margin:auto;
		max-width: 2000px;
	}
}



/* 1.3 - Pop Up Typography */

h1.popuptitle{
	font-family: haboro-serif, Georgia, Times, serif;
	font-size:22px;
	color:#681e28;
	line-height: 1;
	font-weight: 600;
}

p.popupdescription{
	font-family: calibri, arial, helvetica, sans-serif;
	font-weight: 400;
	font-size:16px;
	color: #231f20;
}

p i{
	font-style: italic;
}



ul.popuplist li{
	font-family: haboro-serif, Georgia, Times, serif;
	font-size:18px;
	color: #231f20;
	font-weight: 600;
	line-height: 1.3;
}

ul.popuplist li a{
	text-decoration: none;
	color: #231f20;
}

ul.popuplist li a:hover{
	color:#681e28;
}

@media (min-width: 786px){

	h1.popuptitle{
		font-size:26px;
	}

}

/* 1.4 - Pop Up Structure and Styling */

.mapboxgl-popup{
	-webkit-transform: unset !important;
	-ms-transform: unset !important;
	transform: unset !important;
	top:10px !important;
	left:10px !important;
	right:10px !important;
	bottom:60px !important;
	max-width: unset !important;
}

.mapboxgl-popup-content{
	padding:15px !important;
	overflow-y: auto;
	overflow-x: hidden;
	border-radius: 0px !important;
	border: 0.5px solid #231f20;
	background-color: #eeebe4 !important;
	-webkit-box-shadow: unset !important;
	box-shadow: unset !important;
}

.mapboxgl-popup-anchor-right, .mapboxgl-popup-anchor-left{
	flex-direction: column !important;
}

.mapboxgl-popup-tip{
	display: none !important;
}

.mapboxgl-popup-content .popupheader .popupimage{
	width:250px;
	height:150px;
	margin-bottom:5px;
}

.mapboxgl-popup-content .popuptitle, .mapboxgl-popup-content .sitedescription, .mapboxgl-popup-content .popuplist{
	margin-top:15px;
}

.mapboxgl-popup-close-button{
	font-size: 20px;
}

.mapboxgl-popup-close-button:hover{
	background-color: transparent !important;
	color: #681e28;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #eeebe4;
	border-left: 0.5px solid #231f20;
}

::-webkit-scrollbar-thumb {
  background: #bbb5ad;
	/* border-radius: 10px; */
	border-left: 0.5px solid #231f20;
	/* border-top: 0.5px solid #231f20;
	border-left: 0.5px solid #231f20; */
}


@media (min-width: 768px){

	.mapboxgl-popup-content{
		width: 240px;
		max-height: 550px;
	}


	.mapboxgl-popup{
		right:0px !important;
	}

	.mapboxgl-ctrl-logo {
	    display: block !important;
	}

	.creditwrapper {
		margin-left: 80px;
	}


}

@media (min-width: 1000px){

	.mapboxgl-popup{
		top:20px !important;
		left:20px !important;
	}

.mapboxgl-popup-content{
	width: 300px;
}

.mapboxgl-popup-anchor-right{
	flex-direction: row-reverse;
}

}

@media (min-width: 1300px){
	.mapboxgl-popup-content{
		width: 400px;
	}

}


/* 1.5 - Attribution */


.mapbox-attribution-container {
  bottom: 0;
  right: 0;
  position: absolute;
  display: block;
  margin: 0 10px 5px;
  z-index: 99999;
  padding: 0 5px;
  background-color: hsla(0,0%,100%,.5);
  margin: 0;
  font-size:12px;
}

.mapbox-attribution-container a {
    color: rgba(0,0,0,.75);
    text-decoration: none;
}


.mapbox-attribution-container span {
    color: rgba(0,0,0,.75);
    text-decoration: none;
}

.mapbox-attribution-container a:hover {
    color: inherit;
    text-decoration: underline;
}