/* CSS Global Styles */









/* === Elements ======== */
html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 0.025rem;
}

a {
	cursor: pointer;
}

form input::placeholder,
form textarea::placeholder {
	color: #ccc !important;
}

input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none; 
}










/* === Headings ======== */
.h7 {
	font-size: 0.75rem;
}

.h8 {
	font-size: 0.7rem;
}

.h9 {
	font-size: 0.65rem;
}









/* === Displays ======== */
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6,
.display-7,
.display-8,
.display-9 {
	font-family: 'Gelasio', serif;
	line-height: 1.0;
	letter-spacing: 0.04rem;
}

	.display-1 small,
	.display-2 small,
	.display-3 small,
	.display-4 small,
	.display-5 small,
	.display-6 small,
	.display-7 small,
	.display-8 small,
	.display-9 small {
		font-family: 'Montserrat', sans-serif;
	}

.display-5 {
	font-size: 2.5rem;
}

.display-6 {
	font-size: 1.5rem;
}

.display-7 {
	font-size: 1.25rem;
}

.display-8 {
	font-size: 1.0rem;
}

.display-9 {
	font-size: 0.85rem;
}









/* === Font Families ======== */
.font-family-serif {
	font-family: 'Gelasio', serif;
	line-height: 1.0;
	letter-spacing: 0.04rem;
}

.font-family-sans-serif {
	font-family: 'Montserrat', sans-serif;
	line-height: 1.0;
	letter-spacing: 0.04rem;
}









/* === Font Weight ======== */
.font-weight-medium {
	font-weight: 500 !important;
}

.font-weight-semibold {
	font-weight: 600 !important;
}

.font-weight-bold {
	font-weight: 700 !important;
}

.font-weight-extra-bold {
	font-weight: 800 !important;
}









/* === Line Height ======== */
.line-height-normal {
	line-height: normal !important;
}









/* === Letter Spacing ======== */
.letter-spacing-0 {
	letter-spacing: normal !important;
}

.letter-spacing-25 {
	letter-spacing: 0.025rem !important;
}

.letter-spacing-40 {
	letter-spacing: 0.04rem !important;
}

.letter-spacing-100 {
	letter-spacing: 0.1rem !important;
}

.letter-spacing-200 {
	letter-spacing: 0.2rem !important;
}









/* === Text Truncate ======== */
.text-truncate-4 {
	display: block;
    display: -webkit-box;
    max-height: 200px;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}









/* === Shadows ======== */
.shadow-text {
	text-shadow: rgba(0, 0, 0, 0.4) 0px 3px 3px;
}

.shadow-inner-top {
	box-shadow: inset 0px 11px 15px -10px rgba(0, 0, 0, 0.5);
}

	.shadow-inner-top.position-absolute {
		z-index: 2000;
		pointer-events: none;
		top: 0px;
		left: 0px;
	}

.shadow-inner-top-bottom {
	box-shadow: inset 0px 11px 15px -10px rgba(0, 0, 0, 0.5), inset 0px -11px 15px -10px rgba(0, 0, 0, 0.5);
}

	.shadow-inner-top-bottom.position-absolute {
		z-index: 2000;
		pointer-events: none;
		top: 0px;
		left: 0px;
	}








/* === Colors ======== */
.text-black {
	color: #000 !important;
}

	a.text-black:hover {
		color: #375630 !important;
	}

.text-dark-green {
	color: #375630 !important;
}

.text-light-green {
	color: #738f32 !important;
}

.text-bright-green {
	color: #7ca522 !important;
}

.text-brick-red {
	color: #821616 !important;
}

.text-light-grey {
	color: #dadada !important;
}

.text-medium-grey {
	color: #7f7f7f !important;
}

.text-dark-grey {
	color: #4d4d4d !important;
}

.text-cyan {
	color: #0093df !important;
}

.text-violet {
	color: #921faf !important;
}

.text-orange {
	color: #d28000 !important;
}









/* === Hover ======== */
.hover-brick-red:hover {
	color: #821616 !important;
}









/* === Backgrounds ======== */
.bg-brick-red-95 {
	background-color: rgba(130, 22, 22, 0.95);
}

.bg-white-95 {
	background-color: rgba(255, 255, 255, 0.95);
}

.bg-black-25 {
	background-color: rgba(0, 0, 0, 0.05);
}

.bg-grey-3 {
	background-color: #f7f7f7;
}

.bg-grey-6 {
	background-color: #f0f0f0;
}

.bg-bright-green {
	background-color: #7ca522;
}

.bg-light-green {
	background-color: #738f32;
}

.bg-dark-green {
	background-color: #375630;
}

.bg-gradient-white-grey-3 {
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #f7f7f7 100%);
	background: -webkit-linear-gradient(top,  #ffffff 0%,#f7f7f7 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#f7f7f7 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7',GradientType=0 );
}

.bg-gradient-brick-red {
	background: #821616;
	background: -moz-radial-gradient(center, ellipse cover,  #821616 0%, #640909 100%);
	background: -webkit-radial-gradient(center, ellipse cover,  #821616 0%, #640909 100%);
	background: radial-gradient(ellipse at center,  #821616 0%, #640909 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#821616', endColorstr='#640909',GradientType=1 );
}

.bg-gradient-light-green {
	background: #738f32;
	background: -moz-radial-gradient(center, ellipse cover,  #738f32 0%, #5d791b 100%);
	background: -webkit-radial-gradient(center, ellipse cover,  #738f32 0%, #5d791b 100%);
	background: radial-gradient(ellipse at center,  #738f32 0%, #5d791b 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#738f32', endColorstr='#5d791b',GradientType=1 );
}

.bg-gradient-dark-green {
	background: #375630;
	background: -moz-radial-gradient(center, ellipse cover,  #375630 0%, #1c3c14 100%);
	background: -webkit-radial-gradient(center, ellipse cover,  #375630 0%, #1c3c14 100%);
	background: radial-gradient(ellipse at center,  #375630 0%, #1c3c14 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#375630', endColorstr='#1c3c14',GradientType=1 );
}

.bg-city-schematics-dark-green {
	background-image: url("../img/bg-city-schematics-dark-green.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% auto;
}

.bg-city-schematics-medium-green {
	background-image: url("../img/bg-city-schematics-medium-green.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% auto;
}

.bg-semicircle-top-white {
	position: relative;
}

	.bg-semicircle-top-white:before {
		position: absolute;
		content: '';
		background-image: url("../img/graphic-curve-top-white.svg");
		background-repeat: no-repeat;
		background-size: cover;
		width: 100%;
		height: 35px;
		top: -35px;
		left: 0px;
		pointer-events: none;
	}









/* === Borders ======== */
.debug {
	border: red solid 1px !important;
}

.border-light-grey {
	border-color: #dadada !important;
}

.border-dark-green {
	border-color: #375630 !important;
}

.border-light-green {
	border-color: #738f32 !important;
}

.border-bright-green {
	border-color: #7ca522 !important;
}

.border-brick-red {
	border-color: #821616 !important;
}









/* === Buttons ======== */
.btn-xs {
	padding: .275rem 1.0rem;
	font-size: .6rem;
	line-height: normal;
	border-radius: .3rem;
}

	.btn-xs i {
		vertical-align: middle;
	}

.btn-brick-red {
	color: #fff;
	background-color: #821616;
	border-color: #821616;
}

	.btn-brick-red:hover {
		color: #fff;
		background-color: #650a0a;
		border-color: #650a0a;
	}

.btn-light-green {
	color: #fff;
	background-color: #738f32;
	border-color: #738f32;
}

	.btn-light-green:hover {
		color: #fff;
		background-color: #375630;
		border-color: #375630;
	}

.btn-dark-green {
	color: #fff;
	background-color: #375630;
	border-color: #375630;
}

	.btn-dark-green:hover {
		color: #fff;
		background-color: #738f32;
		border-color: #738f32;
	}









/* === Mapbox ======== */
.mapboxgl-popup {
	max-width: 400px !important;
	padding: 40px 0px;
}

.mapboxgl-popup-close-button {
	display:none;
}











/* === Header ======== */
header ul#icons {
	pointer-events: none;
	top: 0px;
	right: 0px;
}

	header ul#icons li {
		pointer-events: all;	
	}

header ul#menu li .drop-down {
	line-height: 1.3rem;
	opacity: 0.0;
	max-height: 0;
	transition: opacity 0.15s ease-out, max-height 0s linear;
	transition-delay: 0.5s, 1.0s;
}

	header ul#menu li a:focus + .drop-down,
	header ul#menu li .drop-down *:focus,
	header ul#menu li:hover .drop-down {
		opacity: 1.0;
		max-height: 2000px;
		transition: opacity 0.25s ease-in, max-height 0s linear;
	}

@media (max-width: 991.98px) { /* Large */

	header ul#menu li .drop-down {
		transition: opacity 0.15s ease-out, max-height 0s linear;
		transition-delay: 60.0s, 60.25s;
	}

		header ul#menu li div.drop-down div {
			margin-top: 0px !important;
			margin-bottom: 20px !important;
		}
	
}

@media (min-width: 992px) { /* Large */

	header ul#menu li .drop-down {
		position: absolute;
		z-index: 20;
	}

}










/* === Footer ======== */
footer a#jon-morato img {
	max-width: 150px;
}









/* ==== High Contrast ==== */
body.high-contrast,
body.high-contrast header,
body.high-contrast footer,
body.high-contrast .bg-white-95,
body.high-contrast .bg-grey-3,
body.high-contrast .bg-gradient-brick-red,
body.high-contrast .bg-gradient-dark-green,
body.high-contrast .bg-city-schematics-dark-green,
body.high-contrast .bg-city-schematics-medium-green,
body.high-contrast .bg-gradient-light-green,
body.high-contrast .mapboxgl-popup-content {
	background: #000 !important;	
}

body.high-contrast hr,
body.high-contrast p,
body.high-contrast p strong,
body.high-contrast p i,
body.high-contrast form,
body.high-contrast legend,
body.high-contrast legend strong,
body.high-contrast label,
body.high-contrast label strong,
body.high-contrast input,
body.high-contrast textarea,
body.high-contrast small,
body.high-contrast span,
body.high-contrast h1,
body.high-contrast h2,
body.high-contrast h3,
body.high-contrast h4,
body.high-contrast ul,
body.high-contrast ul li,
body.high-contrast ul strong,
body.high-contrast ul em,
body.high-contrast ul i,
body.high-contrast header,
body.high-contrast main,
body.high-contrast article,
body.high-contrast section,
body.high-contrast menu,
body.high-contrast article div,
body.high-contrast table tr td,
body.high-contrast footer,
body.high-contrast header div,
body.high-contrast footer div {
	color: #fff !important;
	border-color: #fff !important;
}

body.high-contrast a,
body.high-contrast button {
	background-color: transparent !important;
	color: #FFCF00 !important;
	border-color: #FFCF00 !important;
}

	body.high-contrast a:hover,
	body.high-contrast button:hover {
		background-color: transparent !important;
		color: #fff !important;
		border-color: #fff !important;
		text-decoration: underline !important;
	}

body.high-contrast button,
body.high-contrast input,
body.high-contrast textarea {
	background: #000 !important;
	border: #fff solid 1px !important;
}

body.high-contrast article:before,
body.high-contrast article:after {
	visibility: hidden;
}

body.high-contrast footer i {
	color: #fff;
}

body.high-contrast footer a small {
	color: #FFCF00 !important;
}

body.high-contrast #accessibility-panel,
body.high-contrast #accessibility-panel .modal-content {
	background-color: #000 !important;
}

body.high-contrast .text-grey-gradient {
	background: none;
	-webkit-background-clip: inherit;
	-webkit-text-fill-color: #fff;
}