/* Reset */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, input, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;vertical-align: baseline;}
:focus {outline: 0;}
body {line-height: 1;}
table {border-collapse: collapse;border-spacing: 0;}
caption, th, td {text-align: left;font-weight: normal;}
object,embed,iframe {position: relative;clear:both;z-index: 0;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
strong {font-weight: bold;}
em {font-style: italic;}
address {display: inline;}
figure {margin: 0;}
input, textarea {
font-family: 'Helvetica', Arial, Sans-Serif;
border-radius: 0;
}

*,
*:before,
*:after {
box-sizing: border-box;
}

/* Brand Palette for NM Local News Fund */

@property --color-deepblue {
syntax: "<color>";
inherits: false;
initial-value: #2b1a45;
}

@property --color-ocean {
syntax: "<color>";
inherits: false;
initial-value: #00b7cd;
}

@property --color-cream {
syntax: "<color>";
inherits: false;
initial-value: #fad09b;
}

@property --color-rose {
syntax: "<color>";
inherits: false;
initial-value: #c21c4a;
}

/* Layout */

body {
font-family: 'Helvetica', Arial, Sans-Serif;
font-size: 14px;
line-height: 15px;
color: #000;
background: #fff;
width: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
}

#map {
position: relative;
display: block;
width: 100vw;
height: 100vh;
}

[data-type="template"],
.warning-screen {
display: none;
}

/**
 * Map
 */

#map-canvas {
position: absolute;
top: 0;
bottom: 0;
width: 100vw;
height: 100vh;
z-index: 10;
}

.mapboxgl-popup,
.mapboxgl-popup-content {
max-width: none !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
border-top-width: 0 !important;
}

.mapboxgl-popup {
font: 13px/1.5 'Open Sans', Arial, sans-serif;
z-index: 9999 !important;
}

.mapboxgl-popup-content {
font-family: Arial, sans-serif;
font-size: 14px;
}

.mapboxgl-ctrl-bottom-right {
position: fixed;
}

.mapboxgl-ctrl-group button {
width: 35px;
height: 35px;
}

.mapboxgl-ctrl-attrib.mapboxgl-compact {
margin: 12px;
min-height: 30px;
padding-right: 30px;
}

.mapboxgl-ctrl-attrib-button {
width: 30px;
height: 30px;
}

.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner {
margin-right: 5px;
line-height: 26px;
}

/**
 * Menu
 */

/* Menu: Header */

#map #menu {
position: fixed;
top: 10px;
left: 10px;
width: 275px;
height: auto;
z-index: 300;
}

#menu #menu-header {
float: left;
width: 100%;
height: auto;
}

#menu-header #menu-toggle {
display: inline-block;
float: left;
}

#menu-toggle a {
display: inline-block;
width: 50px;
height: 50px;
background-color: var(--color-rose);
border-radius: 2px 0 0 5px;
border: 3px solid #fff;
border-right-width: 0;
font-size: 20px;
line-height: 44px;
color: #fff;
text-align: center;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

#menu-toggle a i {
display: none;
}

#menu[data-visible="false"] #menu-toggle a i[data-visible="false"],
#menu[data-visible="true"] #menu-toggle a i[data-visible="true"] {
display: inline-block;
}

#menu-logo {
display: inline-block;
max-width: 80%;
max-height: 80%;
background: #fff;
border-radius: 0 5px 5px 0;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

#menu[data-visible="false"] #menu-logo {
width: 50px;
height: 50px;
}

#menu[data-visible="true"] #menu-logo {
width: 200px;
height: 100px;
border-radius: 0 5px 5px 5px;
}

#menu-logo a {
display: inline-block;
width: 100%;
height: 100%;
transition: width ease 500ms;
}

#menu-logo img {
display: none;
max-width: 100%;
max-height: 100%;
height: auto;
transition: width ease 500ms;
box-sizing: content-box;
}

#menu-logo img#menu-logo-brandmark {
width: 35px;
max-width: 70%;
padding: 15%;
}

#menu-logo img#menu-logo-full {
width: 80%;
padding: 10%;
}

#menu[data-visible="false"] #menu-logo img[data-visible="false"],
#menu[data-visible="true"] #menu-logo img[data-visible="true"] {
display: block;
}

/**
 * Menu: Containers
 */

.menu-containers {
position: relative;
float: left;
width: 100%;
height: auto;
max-height: calc(100vh - 140px);
overflow-y: auto;
overflow-x: visible;
padding: 0 5px 10px 5px;
display: none;
}

@media all and (max-width: 600px) {

.menu-containers {
max-height: calc(100vh - 240px);
}

}

#menu[data-visible="true"] .menu-containers {
display: block;
}

.menu-container {
float: left;
width: 100%;
height: auto;
background: #f7f7f7;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
margin-top: 20px;
border-radius: 5px;
}

.menu-container[data-container="filters"] {
border-top: 5px solid var(--color-ocean);
}

.menu-container[data-container="layers"] {
border-top: 5px solid var(--color-deepblue);
}

.mc-header {
float: left;
width: 100%;
padding: 20px 10% 0 10%;
user-select: none;
cursor: default;
}

.mc-header h3 {
display: block;
font-size: 18px;
line-height: 18px;
text-transform: uppercase;
color: #000;
font-weight: 600;
margin-bottom: 2px;
}

.mc-header .mc-header-description {
display: block;
font-size: 13px;
line-height: 15px;
}

.mc-categories {
float: left;
width: 100%;
padding-top: 20px;
}

.mc-category {
float: left;
width: 100%;
padding: 0 10px;
user-select: none;
cursor: pointer;
}

.mc-category:hover {
background: #e1e1e1;
}

.mc-category.active {
background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.mc-item-input {
float: left;
display: inline-block;
width: 15%;
text-align: center;
}

.mc-item-input button {
display: inline-block;
padding: 0;
}

.mc-category.active > .mc-category-title > .mc-item-input button {
background: #000;
}

.mc-item-label {
float: left;
display: inline-block;
width: 85%;
padding-left: 5px;
}

.mc-item-label span:last-child {
display: none;
}

.mc-item-label span:first-child,
.mc-category-title {
display: block;
}

.mc-category-title .mc-item-input {
height: 40px;
}

.mc-category-title .mc-item-input button {
width: 20px;
height: 20px;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
border-radius: 50%;
margin: 10px 0;
}

.mc-category-title .mc-item-label {
font-size: 14px;
line-height: 18px;
padding-top: 11px;
padding-bottom: 11px;
}

.mc-category.active .mc-category-title > .mc-item-label {
font-weight: 600;
}

.mc-category.active .mc-category-title > .mc-item-label span:last-child {
display: block;
font-size: 11px;
line-height: 13px;
font-weight: 400;
margin-top: 4px;
}

.mc-category-options {
float: left;
display: block;
width: 100%;
padding: 0 0 10px 5%;
display: none;
}

.menu-container[data-container="layers"] .mc-category-options {
cursor: default;
}

.mc-category.active .mc-category-options {
display: block;
}

.mc-category-option {
float: left;
width: 100%;
line-height: 20px;
padding: 5px 0;
}

.menu-container[data-container="layers"] .mc-category-option {
padding: 0;
}

.mc-category-option:hover {
background: #f1f1f1;
}

.mc-category-option .mc-item-input {
height: 20px;
}

.mc-category-option .mc-item-input button {
width: 16px;
height: 16px;
border: 2px solid #515151;
border-radius: 2px;
margin: 2px 0;
color: #000;
}

.mc-category-option.active .mc-item-input button {
background: #000;
color: #fff;
}

.mc-category-option:not(.active) .mc-item-input button {
background: #fff !important;
}

.mc-category-option .mc-item-label {
float: none;
font-size: 13px;
line-height: 16px;
}

#census-controls {
display: none;
}

/* Templates */

#map-templates {
display: none;
}

/* Template: Marker */

.map-marker {
display: block;
position: absolute;
padding: 0;
border-radius: 50%;
box-shadow: 0 0 2px #333;
border: 2px solid #fff;
background: #fff;
transition: all ease 500ms;
cursor: pointer;
box-sizing: border-box;
z-index: 10;
}

.map-marker[data-cluster="true"] {
border-color: #515151 !important;
}

.map-marker:hover {
box-shadow: 0 8px 20px #515151;
top: -2px;
}

.map-marker-icon {
display: block;
width: 100%;
height: 100%;
color: #515151;
font-size: 12px;
text-align: center;
vertical-align: middle;
}

.map-marker[data-cluster="true"] .map-marker-icon span {
font-weight: 600;
}

/* Template: Popup */

.mapboxgl-popup-content {
background-color: transparent;
box-shadow: none;
}

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

.mp-container {
position: relative;
float: left;
width: 100vw;
max-width: 350px;
background: #fff;
border-radius: 10px;
border: 5px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.mp-close {
position: absolute;
top: -15px;
right: -15px;
width: 30px;
height: 30px;
background: #fff;
border-radius: 50%;
border: 2px solid #cbcbcb;
color: #000;
font-size: 14px;
line-height: 30px;
text-align: center;
cursor: pointer;
z-index: 100;
}

.mp-top {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background-color: var(--color-rose);
box-radius: 5px;
cursor: default;
}

.mp-cil-container {
position: absolute;
top: -35px;
left: calc(50% - 30px);
}

.mp-cil-container span.score {
position: relative;
display: inline-block;
width: 60px;
height: 60px;
font-size: 16px;
line-height: 50px;
font-weight: 600;
color: #fff;
border-radius: 50%;
border: 5px solid #fff;
background-color: var(--color-deepblue);
text-align: center;
user-select: none;
z-index: 20;
}

.mp-cil-container span.progress {
position: absolute;
top: -5px;
left: -5px;
width: calc(100% + 10px);
height: calc(100% + 10px);
border-radius: 50%;
background: radial-gradient(closest-side, #fff 0%, transparent 80% 100%), conic-gradient(var(--color-ocean) 0%, #e1e1e1 0);
z-index: 5;
}

.mp-cil-popup {
position: absolute;
top: 20px;
left: 10%;
width: 80%;
height: auto;
background: #fff;
padding: 20px;
border: 5px solid var(--color-ocean);
border-radius: 10px;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
opacity: 0;
transition: all ease 500ms;
visibility: hidden;
z-index: 100;
}

.mp-top:hover .mp-cil-popup {
opacity: 1;
top: 40px;
visibility: visible;
}

.mp-cil-popup:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
border-radius: 10px;
z-index: 1;
}

.mp-cil-popup:after {
content: "";
position: absolute;
top: -10px;
left: calc(50% - 10px);
width: 20px;
height: 20px;
background: var(--color-ocean);
border-radius: 3px;
transform: rotate(45deg);
z-index: -1;
}

.mp-cil-popup * {
position: relative;
z-index: 1;
}

.mp-cil-popup .mp-cil-title {
display: block;
font-size: 12px;
line-height: 12px;
text-transform: uppercase;
font-weight: 500;
margin-bottom: 3px;
}

.mp-cil-popup .mp-cil-label {
display: block;
font-size: 18px;
line-height: 20px;
font-weight: 600;
margin-bottom: 3px;
}

.mp-cil-popup .mp-cil-description {
display: block;
font-size: 13px;
line-height: 16px;
}

.mp-header {
float: left;
width: 100%;
height: auto;
padding: 40px 5% 20px 5%;
text-align: center;
}

.mp-header h4 {
display: inline-block;
font-size: 18px;
line-height: 27px;
font-weight: 600;
color: var(--color-deepblue);
margin-bottom: 3px;
}

.mp-header p {
display: inline-block;
font-size: 13px;
line-height: 18px;
color: #000;
margin-bottom: 0;
}

.mp-body {
position: relative;
float: left;
width: 100%;
height: auto;
padding: 0 5%;
max-height: 60vh;
overflow-y: auto;
}

.mp-body-column {
position: relative;
float: left;
display: inline-block;
width: 50%;
padding: 0 10px;
box-sizing: border-box;
z-index: 2;
}

.mp-column-item {
float: left;
width: 100%;
margin-bottom: 15px;
color: #000;
}

.mp-column-item:last-child {
margin-bottom: 0;
}

.mp-column-item label {
position: relative;
display: block;
font-size: 12px;
line-height: 12px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 2px;
}

.mp-column-item label i:hover:after {
content: attr(title);
position: absolute;
top: 20px;
left: 0;
width: 150px;
height: auto;
background: var(--color-cream);
padding: 8px;
font-family: 'Helvetica', Arial, Sans-Serif;
font-size: 11px;
line-height: 13px;
font-weight: 400;
text-transform: none;
color: #000;
text-align: left;
border-radius: 5px;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
z-index: 100;
}

.mp-column-item:last-child label i:hover:after {
top: auto;
bottom: 25px;
}

.mp-column-item label i {
color: #818181;
margin-left: 3px;
}

.mp-column-item span {
display: block;
font-size: 13px;
line-height: 15px;
}

.mp-body-row {
position: relative;
float: left;
width: 100%;
padding: 10px 5%;
cursor: default;
transition: width ease 500ms;
z-index: 10;
}

.mp-body-row:hover {
background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
z-index: 20;
}

.mp-row-title {
display: block;
font-size: 16px;
line-height: 18px;
font-weight: 600;
margin-bottom: 3px;
}

.mp-row-description {
display: block;
font-size: 12px;
line-height: 14px;
}

.mp-footer {
position: relative;
float: left;
width: 100%;
padding: 50px 5% 20px 5%;
overflow-x: hidden;
}

.map-popup-wrapper[data-template="popup"] .mp-footer:before {
content: "";
position: absolute;
top: -475px;
left: -325px;
width: 1000px;
height: 500px;
border-radius: 50%;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.mp-footer-column {
position: relative;
float: left;
display: inline-block;
box-sizing: border-box;
}

.mp-footer-column:first-child {
width: 40%;
}

.mp-footer-column:last-child {
width: 60%;
}

.mp-footer-column div {
margin-bottom: 10px;
}

.mp-footer-column div:last-child {
margin-bottom: 0;
}

.mp-footer-column a.mp-button {
display: inline-block;
background-color: var(--color-rose);
border-radius: 5px;
color: #fff;
font-weight: 600;
text-decoration: none;
user-select: none;
padding: 5px 7px;
cursor: pointer;
}

.mp-footer-column a.mp-button i {
display: inline-block;
}

.mp-footer-column a.mp-button * {
margin-right: 5px;
}

.mp-footer-date {
position: absolute;
top: -15px;
right: 10px;
width: auto;
font-size: 11px;
line-height: 11px;
font-weight: 600;
text-transform: uppercase;
color: #969696;
user-select: none;
}

.mp-footer-icons {
float: right;
clear: right;
width: auto;
text-align: left;
}

.mp-footer-icons a {
display: inline-block;
border-radius: 50%;
background-color: #515151;
width: 26px;
height: 26px;
text-align: center;
text-decoration: none;
color: #fff;
font-size: 17px;
line-height: 26px;
margin: 3px 2px;
}

.mp-footer-icons a:last-child {
margin-right: 0;
}

.mp-footer-icons a span {
text-transform: uppercase;
}

[data-mp-property-template] {
display: none !important;
}

@media all and (max-width: 350px) {

#warning-reason-smallscreen {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.8);
text-align: center;
z-index: 99999;
}

#warning-reason-smallscreen a {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
line-height: 30px;
color: #fff;
}

}