/* 'Name', 'Email', & Phone' fields */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
	font-size: 16px; }

/* 'Submit Message' button */
.wpcf7 input[type="submit"] {
	font-size: 16px;
  font-weight: bold; }

/* Labels (e.g. 'Requested Service', 'Additional Message') */
.wpcf7-form label {
	font-size: 16px; }

/* Line spacing */
.wpcf7-form p {
	font-size: 12px; }

/* 'Requested Service' field */
.wpcf7-form select {
	font-size: 16px; }

/* 'Additional Message' field */
.wpcf7-form textarea {
	font-size: 16px;
	max-height: 75px; }

/* 'Let's Start ... ' text (span class) */
.intro1 {
	font-size: 20px;
  font-weight: bold; }

/* 'Call us at ... ' text (span class) */
.intro2 {
	font-size: 16px; }


/* ==========================================================================
   INA — SITE-WIDE CUSTOM CSS (Dark Mode)
   Paste this into: Appearance > Customize > Additional CSS
   (or Elementor Pro > Site Settings > Custom Code > Custom CSS if preferred)
 
   Converted from the light-mode version on 2026-09-29. Same class names,
   same structure — only the token VALUES in :root changed, plus a handful
   of hardcoded colors that couldn't be token-driven (noted inline below).
   Any page built against the ina- component classes repaints automatically
   once this file replaces the old one — no markup changes needed.
 
   This file ONLY contains things Elementor's native panels can't do:
   color/font tokens, the eyebrow label style, mono "file number" labels,
   button hover states, card hover states, nav blur, and focus rings.
   Everything else (padding, columns, alignment) should be set directly
   in Elementor using these same color/font names as your Global Colors
   and Global Fonts — see the build guide for the exact hex values.
   ========================================================================== */
 
:root{
  --ina-ink:#0A121D;          /* page background */
  --ina-ink-panel:#0F1B2B;    /* card / hover panel background */
  --ina-ink-panel-2:#132234;  /* CTA band background */
  --ina-line:#243248;         /* hairline borders */
  --ina-text:#EDEFF3;         /* body/heading text */
  --ina-text-muted:#8C97A8;   /* secondary text */
  --ina-brass:#C79A5B;        /* primary accent (buttons, links, icons) */
  --ina-brass-dim:#8A6E45;    /* borders on brass elements */
  --ina-signal:#5AA98C;       /* status/data green (blips, small dots) */
  --ina-on-accent:#14202E;    /* dark text used ON TOP of brass backgrounds (unchanged — still reads well on the lighter dark-mode brass) */
}
 
/* Reduced-motion handling lives inside hero-background-widget.html itself,
   scoped to .ina-hero-bg — no global rule needed here, so nothing in this
   file touches elements outside the INA components. */
 
/* Consistent keyboard focus ring — scoped to the new INA components only,
   not every link/button on the existing site. */
.ina-btn-primary:focus-visible,
.ina-btn-secondary:focus-visible,
.ina-btn-pay:focus-visible,
.ina-resource-link:focus-visible,
.ina-breadcrumb a:focus-visible,
.ina-social a:focus-visible{
  outline:2px solid var(--ina-brass);
  outline-offset:3px;
}
 
/* ---------- "Eyebrow" label (small caps mono label above headings) ----------
   Usage: add class "ina-eyebrow" to a Text Editor widget, e.g.
   <div class="ina-eyebrow">01 — Who We Are</div>                            */
.ina-eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ina-brass);
  display:flex;
  align-items:center;
  gap:10px;
}
.ina-eyebrow::before{
  content:"";
  width:16px;
  height:1px;
  background:var(--ina-brass);
  display:inline-block;
}
.ina-eyebrow.center{ justify-content:center; }
 
/* ---------- Mono utility text (coordinates, file numbers, fine print) ---------- */
.ina-mono{
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.04em;
  color:var(--ina-text-muted);
}
 
/* ---------- Sticky header: translucent + blur ----------
   Apply "ina-header" as a CSS Class on the Theme Builder header Container. */
.ina-header{
  background:rgba(10,18,29,0.82) !important; /* translucent --ina-ink for dark mode */
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ina-line);
}
 
/* ---------- Primary button (brass fill) ----------
   Apply "ina-btn-primary" as a CSS Class on an Elementor Button widget. */
.ina-btn-primary .elementor-button{
  background:var(--ina-brass) !important;
  color:var(--ina-on-accent) !important;
  font-weight:600;
  border-radius:2px;
  transition:background 0.2s ease;
}
.ina-btn-primary .elementor-button:hover{
  background:#93672E !important;
  color:var(--ina-on-accent) !important;
}
 
/* ---------- Secondary / outline button ----------
   Apply "ina-btn-secondary" as a CSS Class on an Elementor Button widget. */
.ina-btn-secondary .elementor-button{
  background:transparent !important;
  border:1px solid var(--ina-line) !important;
  color:var(--ina-text) !important;
  border-radius:2px;
  transition:border-color 0.2s ease, background 0.2s ease;
}
.ina-btn-secondary .elementor-button:hover{
  border-color:var(--ina-brass-dim) !important;
  background:var(--ina-ink-panel) !important;
}
 
/* ---------- Nav "Make a Payment" pill (outline that fills brass on hover) ----------
   Apply "ina-btn-pay" as a CSS Class on the header Button widget. */
.ina-btn-pay .elementor-button{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px !important;
  letter-spacing:0.06em;
  text-transform:uppercase;
  background:transparent !important;
  border:1px solid var(--ina-brass-dim) !important;
  color:var(--ina-brass) !important;
  border-radius:2px;
  padding:10px 18px !important;
}
.ina-btn-pay .elementor-button:hover{
  background:var(--ina-brass) !important;
  color:var(--ina-on-accent) !important;
  border-color:var(--ina-brass) !important;
}
 
/* ---------- Stat strip (hero bottom row) ----------
   Wrap 4 Elementor columns in a Container with class "ina-stat-strip". */
.ina-stat-strip{
  border-top:1px solid var(--ina-line);
}
.ina-stat-strip > .elementor-column{
  border-right:1px solid var(--ina-line);
}
.ina-stat-strip > .elementor-column:last-child{
  border-right:none;
}
.ina-stat-num{
  font-family:'Fraunces', serif;
  font-size:30px;
  color:var(--ina-brass);
}
.ina-stat-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ina-text-muted);
  margin-top:6px;
}
 
/* ---------- Service card (docket-style hover) ----------
   Apply "ina-service-card" as a CSS Class on each Icon Box widget's
   parent Container (or the Icon Box itself if using Container-per-card). */
.ina-service-card{
  background:var(--ina-ink);
  border:1px solid var(--ina-line);
  transition:background 0.25s ease;
}
.ina-service-card:hover{
  background:var(--ina-ink-panel);
}
.ina-service-filenum{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--ina-brass-dim);
  letter-spacing:0.08em;
}
 
/* ---------- CTA band background glow ----------
   Apply "ina-cta-band" as a CSS Class on the CTA section Container. */
.ina-cta-band{
  background:linear-gradient(120deg, var(--ina-ink-panel-2), var(--ina-ink-panel));
  position:relative;
  overflow:hidden;
}
.ina-cta-band::before{
  content:"";
  position:absolute;
  top:-40%; left:50%;
  width:900px; height:900px;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(199,154,91,0.15), transparent 60%); /* dark-mode brass glow, slightly stronger alpha to read against the darker panel */
  pointer-events:none;
}
 
/* ---------- Footer socials (circular icon links) ----------
   Apply "ina-social" as a CSS Class on the Social Icons widget wrapper. */
.ina-social a{
  border:1px solid var(--ina-line) !important;
  transition:border-color 0.2s ease, color 0.2s ease;
}
.ina-social a:hover{
  border-color:var(--ina-brass) !important;
  color:var(--ina-brass) !important;
}

/* ==========================================================================
   INA — ADDITIONAL CUSTOM CSS FOR LONG-FORM SERVICE PAGES (Dark Mode)
   (Security Services, and any future detail page with the same pattern)
 
   Where this goes: Appearance > Customize > Additional CSS
   — APPEND this to the end of the file where you already pasted
   site-custom-css.css from the homepage package. Don't replace that file,
   add to it. These are new classes; nothing here conflicts with what's
   already there.
 
   Converted from the light-mode version on 2026-09-29 alongside
   site-custom-css.css. Everything here is token-driven off the same
   --ina-* variables, so it repaints automatically — the only hand-edited
   spots are a couple of hardcoded colors that couldn't be tokens (a brass
   rgba() tint and three "floating white card" backgrounds), each noted
   inline where they appear below.
   ========================================================================== */
 
/* ---------- Page header (photo-free "sub-hero" for interior pages) ----------
   Apply "ina-page-header" as a CSS Class on the section Container at the
   top of any interior page (breadcrumb + eyebrow + heading + intro). */
.ina-page-header{
  border-bottom:1px solid var(--ina-line);
}
.ina-breadcrumb{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  color:var(--ina-text-muted);
  letter-spacing:0.04em;
}
.ina-breadcrumb a{ color:var(--ina-text-muted); }
.ina-breadcrumb a:hover{ color:var(--ina-brass); }
.ina-breadcrumb .current{ color:var(--ina-text); }
 
/* ---------- Video frame ----------
   Apply "ina-video-frame" as a CSS Class on the Container that holds
   Elementor's native Video widget. */
.ina-video-frame{
  border:1px solid var(--ina-line);
  padding:10px;
  background:var(--ina-ink-panel);
  max-width:820px;
}
.ina-video-caption{
  margin-top:14px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--ina-text-muted);
  letter-spacing:0.02em;
}
.ina-video-caption strong{ color:var(--ina-text); font-weight:500; }
 
/* ---------- Docket list (long-form entries: icon/number + heading + body) ----------
   Apply "ina-docket-item" as a CSS Class on EACH entry's Container.
   Each Container should have two columns inside it: a narrow left column
   (file number + icon) and a wide right column (heading + paragraphs). */
.ina-docket-item{
  border-top:1px solid var(--ina-line);
  padding:56px 0 !important;
  scroll-margin-top:100px; /* keeps the sticky header from covering the heading when jumped to */
}
.ina-docket-filenum{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--ina-brass-dim);
  letter-spacing:0.08em;
}
.ina-docket-icon{
  color:var(--ina-brass);
  width:30px;
  height:30px;
}
.ina-docket-item h3{
  font-family:'Fraunces', serif;
  font-size:24px;
  font-weight:500;
  color:var(--ina-text);
  margin-bottom:16px;
}
.ina-docket-item p{
  color:var(--ina-text-muted);
  font-size:15.5px;
  max-width:680px;
}
.ina-docket-item p + p{ margin-top:14px; }
 
/* ---------- Resource/whitepaper link (small brass link with underline) ----------
   Apply "ina-resource-link" as a CSS Class on a Text Editor or Button
   widget used as an inline link beneath a docket entry's copy. */
.ina-resource-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  color:var(--ina-brass) !important;
  border-bottom:1px solid var(--ina-brass-dim);
  padding-bottom:2px;
}
.ina-resource-link:hover{
  color:var(--ina-on-accent) !important;
  border-color:var(--ina-on-accent);
}
 
/* ---------- Quick-jump nav (tag-style links to each docket entry) ----------
   Apply "ina-quicknav" as a CSS Class on the Container that wraps the
   jump links. Apply "ina-quicknav-item" to each individual Button widget
   inside it (one per docket entry, href="#file-01" etc.). Each docket
   item's Container needs a matching CSS ID (file-01, file-02, ...) set
   in its Advanced tab — see the guide for exact steps. */
.ina-quicknav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:36px 0;
  border-top:1px solid var(--ina-line);
  border-bottom:1px solid var(--ina-line);
}
.ina-quicknav-label{
  width:100%;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ina-text-muted);
  margin-bottom:6px;
}
.ina-quicknav-item .elementor-button{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  background:transparent !important;
  border:1px solid var(--ina-line) !important;
  border-radius:2px;
  padding:9px 14px !important;
  font-family:'Inter', sans-serif !important;
  font-size:13px !important;
  font-weight:400 !important;
  color:var(--ina-text) !important;
  transition:border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.ina-quicknav-item .elementor-button:hover{
  border-color:var(--ina-brass) !important;
  background:var(--ina-ink-panel) !important;
  color:var(--ina-brass) !important;
}
.ina-quicknav-item .ina-quicknav-num{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--ina-brass-dim);
}
 
/* ---------- Sticky contact sidebar ("Let's Start a Conversation") ----------
   Reusable on any detail page that needs a sticky lead-capture form next to
   long-form content (Background Checks and similar pages).
   Apply "ina-contact-sidebar" as a CSS Class on the Container that wraps
   the heading, intro text, and your Contact Form widget. */
.ina-contact-sidebar{
  position:sticky;
  top:110px; /* clears the sticky nav */
  background:var(--ina-ink-panel);
  border:1px solid var(--ina-line);
  padding:32px;
  border-radius:2px;
}
.ina-contact-sidebar h3, .ina-contact-sidebar h4{
  font-family:'Fraunces', serif;
  font-size:22px;
  font-weight:500;
  color:var(--ina-text);
  margin-bottom:14px;
}
.ina-contact-sidebar > p{
  font-family:'Inter', sans-serif;
  font-size:14.5px;
  color:var(--ina-text-muted);
  margin-bottom:24px;
}
.ina-contact-sidebar > p strong,
.ina-contact-sidebar > p a{
  color:var(--ina-brass);
  font-weight:600;
}
 
/* Generic field styling — targets standard form elements regardless of
   which form plugin renders them. If your form plugin wraps fields in its
   own classes that override these, send a screenshot of the rendered
   markup and this can be tightened to target it directly. */
.ina-contact-sidebar input[type="text"],
.ina-contact-sidebar input[type="email"],
.ina-contact-sidebar input[type="tel"],
.ina-contact-sidebar input[type="number"],
.ina-contact-sidebar textarea,
.ina-contact-sidebar select{
  width:100%;
  padding:12px 14px;
  margin-bottom:14px;
  border:1px solid var(--ina-line) !important;
  background:var(--ina-ink) !important;
  font-family:'Inter', sans-serif;
  font-size:14px;
  color:var(--ina-text) !important;
  border-radius:2px;
  box-shadow:none !important;
}
.ina-contact-sidebar input:focus,
.ina-contact-sidebar textarea:focus,
.ina-contact-sidebar select:focus{
  border-color:var(--ina-brass) !important;
  outline:none;
}
.ina-contact-sidebar label{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ina-text-muted);
  display:block;
  margin-bottom:6px;
}
.ina-contact-sidebar input[type="submit"],
.ina-contact-sidebar button[type="submit"]{
  width:100%;
  background:var(--ina-brass) !important;
  color:var(--ina-on-accent) !important;
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:14px;
  padding:14px 24px !important;
  border:none !important;
  border-radius:2px;
  cursor:pointer;
  transition:background 0.2s ease;
}
.ina-contact-sidebar input[type="submit"]:hover,
.ina-contact-sidebar button[type="submit"]:hover{
  background:#93672E !important;
}
.ina-contact-sidebar .char-count,
.ina-contact-sidebar small{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--ina-text-muted);
}
 
/* ============================================
   CENTERED CHECKLIST (Public Records & Research)
   Single-column, centered, stacked icon+heading+paragraph items
   ============================================ */
.ina-checklist{
  max-width:760px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:0;
}
.ina-checklist-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:36px 20px;
  border-bottom:1px solid var(--ina-line);
}
.ina-checklist-item:last-child{
  border-bottom:none;
}
.ina-checklist-icon{
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(199,154,91,0.16); /* dark-mode brass tint, slightly stronger alpha for visibility on dark backgrounds */
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
  flex-shrink:0;
}
.ina-checklist-icon svg{
  width:20px;
  height:20px;
}
.ina-checklist-icon svg path,
.ina-checklist-icon svg polyline{
  stroke:var(--ina-brass);
}
.ina-checklist-heading{
  font-family:'Fraunces', serif;
  font-size:20px;
  font-weight:600;
  color:var(--ina-text);
  margin:0 0 10px 0;
}
.ina-checklist-text{
  font-family:'Inter', sans-serif;
  font-size:15px;
  line-height:1.65;
  color:var(--ina-text-muted);
  max-width:560px;
  margin:0;
}
 
/* ============================================
   ABOUT PAGE: STAT CARD (heading + boxed stat row on tinted section)
   Distinct from the homepage's ina-stat-strip (full-bleed, top-border-only,
   used inside the dark hero). This is a floating white card used on a
   tinted/panel background section, paired with a heading beside it.
   ============================================ */
.ina-stat-section{
  background:var(--ina-ink-panel);
}
.ina-stat-heading{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:clamp(26px,3vw,32px);
  color:var(--ina-text);
  line-height:1.2;
}
.ina-stat-card{
  background:var(--ina-ink-panel-2); /* was a floating white card in light mode; a raised dark panel reads the same way here, distinct from the section's own --ina-ink-panel background */
  border:1px solid var(--ina-line);
  border-radius:2px;
  padding:36px 40px;
}
.ina-stat-card > .elementor-column{
  border-right:1px solid var(--ina-line);
}
.ina-stat-card > .elementor-column:last-child{
  border-right:none;
}
 
/* ============================================
   MEMBERSHIP / CERTIFICATION LOGO GRID
   Grid of partner, membership, or certifying-body logos.
   Wrap logos (Image widgets) in a Container with class "ina-logo-grid";
   each logo's own wrapping column/container gets "ina-logo-item".
   ============================================ */
.ina-logo-grid{
  display:flex;
  flex-wrap:wrap;
  gap:48px 64px;
  align-items:center;
}
.ina-logo-item{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#FFFFFF; /* new for dark mode: most membership/certification badges are designed on a white background and disappear or look wrong sitting directly on dark navy — a white chip keeps them legible. Remove this if your actual logo files already have dark-friendly (transparent or light) versions. */
  padding:14px 20px;
  border-radius:4px;
}
.ina-logo-item img{
  max-height:64px;
  width:auto;
  filter:grayscale(0%);
  opacity:0.92;
  transition:opacity 0.2s ease;
}
.ina-logo-item img:hover{
  opacity:1;
}
@media (max-width:760px){
  .ina-logo-grid{gap:32px 40px; justify-content:center;}
}
 
/* ============================================
   CONTACT PAGE: INFO ROW (icon + text, 2-column grid)
   Wrap all rows in a Container with class "ina-info-grid" (2 columns).
   Each row: a Container with class "ina-info-row" holding an Icon widget
   ("ina-info-icon") and a Text Editor widget ("ina-info-text").
   ============================================ */
.ina-info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px 40px;
}
.ina-info-row{
  display:flex;
  align-items:flex-start;
  gap:16px;
}
.ina-info-icon{
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--ina-brass);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.ina-info-icon svg{
  width:18px;
  height:18px;
  stroke:var(--ina-on-accent);
  fill:none;
}
.ina-info-text{
  font-family:'Inter', sans-serif;
  font-size:15px;
  line-height:1.6;
  color:var(--ina-text);
  padding-top:6px;
}
@media (max-width:640px){
  .ina-info-grid{grid-template-columns:1fr;}
}
 
/* ============================================
   CONTACT PAGE: CONSULTATION CARD (toll-free banner + lead-capture form)
   One card: a dark banner strip on top (phone callout) and a white
   form section below. Distinct from ina-contact-sidebar (which has no
   banner and is used standalone on Background Checks).
   ============================================ */
.ina-consult-card{
  position:sticky;
  top:110px;
  background:var(--ina-ink-panel-2); /* was a floating white card in light mode; raised dark panel here */
  border:1px solid var(--ina-line);
  border-radius:2px;
  overflow:hidden;
}
.ina-consult-banner{
  background:var(--ina-ink); /* was --ina-text (dark navy) in light mode, which is now the light body-text color — swapped to --ina-ink, the darkest background token, so the banner still reads as a deeper strip than the card body */
  padding:28px 32px;
  color:#FFFFFF;
}
.ina-consult-banner-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ina-brass);
  margin-bottom:8px;
}
.ina-consult-phone{
  font-family:'Fraunces', serif;
  font-size:26px;
  font-weight:500;
  color:#FFFFFF;
}
.ina-consult-form{
  padding:32px;
}
.ina-consult-form h3{
  font-family:'Fraunces', serif;
  font-size:20px;
  font-weight:500;
  margin-bottom:18px;
}
.ina-consult-form label{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ina-text-muted);
  display:block;
  margin-bottom:6px;
}
.ina-consult-form input,
.ina-consult-form select,
.ina-consult-form textarea{
  width:100%;
  padding:12px 14px;
  margin-bottom:14px;
  border:1px solid var(--ina-line);
  background:var(--ina-ink);
  font-family:'Inter', sans-serif;
  font-size:14px;
  color:var(--ina-text);
  border-radius:2px;
}
.ina-consult-form input:focus,
.ina-consult-form select:focus,
.ina-consult-form textarea:focus{
  border-color:var(--ina-brass);
  outline:none;
}
.ina-consult-form small{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--ina-text-muted);
  display:block;
  margin-bottom:16px;
}
.ina-consult-form input[type="submit"],
.ina-consult-form button[type="submit"]{
  width:100%;
  background:var(--ina-brass) !important;
  color:var(--ina-on-accent) !important;
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:14px;
  padding:14px 24px !important;
  border:none !important;
  border-radius:2px;
  cursor:pointer;
  transition:background 0.2s ease;
}
.ina-consult-form input[type="submit"]:hover,
.ina-consult-form button[type="submit"]:hover{
  background:#93672E !important;
}
@media (max-width:900px){
  .ina-consult-card{position:relative; top:0;}
}
 
/* ============================================
   CONTACT PAGE: FULL-BLEED MAP EMBED
   Apply "ina-map-frame" as a CSS Class on the Container holding the map
   embed (an HTML widget with an iframe, or a maps plugin's embed shortcode).
   ============================================ */
.ina-map-frame{
  width:100%;
  height:420px;
}
.ina-map-frame iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}