/* /css/blog.css */
.blog h2 {
  margin-bottom: 30px;
}

.blog-index .thumbnail {
  background-repeat: no-repeat;
  background-size: cover;
  height: 200px;
  object-fit: cover;
  width: 100%;
}

.blog-index .thumbnail.none {
  background-color: #ccc;
  padding-top: 90px;
  text-align: center;
}

.blog-index .item > a {
  color: #9f9f9f;
  text-decoration: none;
}

.blog-index article {
  margin: 0px;
  padding-bottom: 40px;
}

.blog-index article .item {
  border-bottom: 1px #9f9f9f dashed;
  height: 100%;
  margin-bottom: 10px;
}

.blog-index article h2 a {
  color: #131313;
  font-size: 20px;
  font-weight: bold;
  line-height: initial;
  margin-bottom: 20px;
  text-decoration: none;
}

.blog-index .post-meta {
  border-top: 1px #9f9f9f dashed;
  margin-bottom: 20px;
  padding-top: 12px;
}


.blog header h1 {
  margin-bottom: 20px;
}

.blog .videoWrapper {
  margin-bottom: 20px;
}

/* Side Bar */

.blog aside section.search .label {
  width: 100%;
}

.blog aside section.search h2 {
  margin-bottom: auto;
}

.blog aside section.search label {
  display: block;
  margin-bottom: 0px;
}

.blog aside section.search input {
  width: 100%;
  padding: 6px 12px 6px 12px;
  border: 1px #e2e2e2 solid;
  border-radius: 3px;
}

.blog aside section.search button {
  background-color: #fff;
  border: none;
  width: 40px;
}

.blog aside section {
  background-color: #fff;
  margin-bottom: 35px;
  padding: 20px 23px 25px 23px;
  border: 1px #e2e2e2 solid;
}

.blog aside section h2 {
  font-size: 12px;
  text-transform: uppercase;
  padding-top: 0px;
  padding-bottom: 10px;
}

.blog aside section ul{
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.blog aside section ul li {
  border-bottom: 1px #e2e2e2 solid;
  margin-bottom: 12px;
  padding-bottom: 15px;
}

.blog aside a {
  color: #424141;
  font-size: 14px;
  line-height: 0px;
}

.blog aside .tags a {
  -webkit-transition: all 0.3s ease-in-out;
  background: #f6f6f6;
  border-radius: 3px;
  border: none;
  color: #505050;
  display: inline-block;
  font-size: 12px;
  line-height: 23px;
  margin: 0 5px 5px 0;
  padding: 2px 10px 4px 10px;
  transition: all 0.3s ease-in-out;
  vertical-align: top;
}

/* Author */

.blog header {
  line-height: 1rem;
  margin-bottom: 20px;
}

.blog header .image img {
  border-radius: 50%;
  width: 60px;
}

.blog header .data, .blog .bio .data {
  padding-left: 20px;
  width: 100%;
}

.blog header p {
  margin-bottom: 0px;
}

.blog .bio {
  border: 1px #e2e2e2 solid;
  margin-bottom: 35px;
  padding: 15px 20px 20px 20px;
}

.blog .bio img {
  height: 80px;
  max-width: none;
}

.blog .bio .designation, .blog .bio .title, .blog header .published, .blog header .author {
  color: #131313;
  font-size: 12px;
  font-style: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0px;
}

.blog .bio .title, .blog header .author {
  font-weight: bold;
}

/* Tags */

.blog .tags {
  border-bottom: 1px #e2e2e2 solid;
  border-top: 1px #e2e2e2 solid;
  margin-bottom: 40px;
  padding-bottom: 20px;
  padding-top: 20px;
}

/* Pagination */

.pagination > * {
  background: #fff; 
  border-radius: 0; 
  border: 1px #cdcdcd solid; 
  display: inline-block;
  float: none;
  font-size: 11px; 
  font-weight: 700; 
  color: #8c6955;
  letter-spacing: 1px; 
  line-height: 20px; 
  margin: 0px 5px 10px 5px;
  padding: 4px 10px 4px 10px; 
  text-transform: uppercase; 
  vertical-align: top;
}

.pagination {
  border-radius: 0; 
  border-radius: 4px; 
  display: block; 
  font-size: 0; 
  margin-left: -5px; 
  margin-right: -5px; 
  margin: 20px 0; 
  padding: 0; 
  text-align: center; 
}

.pagination .current {
  background-color: #8c6955;
  border-color: #8c6955;
  color: #fff;
}

/* Navigation */

.navigation {
  margin-bottom: 40px;
  margin-top: 40px;
}

.navigation .previous, .navigation .next {
  vertical-align: top;
}

.navigation .previous a {
  padding-left: 40px;
  text-align: left;
}

.navigation .previous a strong, .navigation .next a strong {
  display: block;
  margin-top: 3px;
  text-transform: none;
  font-weight: 500;
  font-size: 16px;
  color: #252525;
  line-height: 26px;
  letter-spacing: 0;
}

.navigation .next a {
  padding-right: 40px;
  text-align: right;
}

.navigation .previous a, .navigation .next a {
  color: #292929;
  cursor: pointer;
  display: block;
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 18px;
  position: relative;
  text-transform: uppercase;
}

.navigation .previous a:before, .navigation .next a:before {
  color: #c0c0c0;
  font-size: 40px;
  line-height: 40px; 
  position: absolute; 
  top: 3px; 
}

.navigation .previous a:before {
  content: "<";
  left: 0;
}

.navigation .next a:before {
  content: ">";
  right: 0;
}

/* Contact */

.blog .contact {
  background-color: #eaeaea;
  padding: 15px 15px 15px 15px;
  margin-bottom: 20px;
}

.blog .contact h2 {
  padding-top: 0;
}

@media screen and (min-width: 767px) {
  .blog .contact {
    padding: 15px 15px 15px 15px;
    margin-bottom: 0px;
  }
}

/* Action */

.blog .action {
  background: #eaeaea;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: 20px;
}

.blog .action h2 {
  padding-top: 0;
}

/* /css/coffee-break.css */
/* Coffee Break Archive Layout */

.coffee-break-archive {
  background-color: #f9f9f9;
  padding: 40px 0 60px 0;
}

.coffee-break-archive h1 {
  font-size: 42px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #131313;
}

.coffee-break-archive > .container > .row:first-child p {
  font-size: 18px;
  color: #666;
  margin-bottom: 40px;
}

/* Coffee Break Card */

.coffee-break-card {
  background-color: #fff;
  margin-bottom: 40px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.coffee-break-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.coffee-break-card .card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.coffee-break-card .card-link:hover {
  text-decoration: none;
}

.coffee-break-card .card-inner {
  display: flex;
  flex-direction: column;
}

/* Every image sits in a full-width 16:9 box above the text. */
.coffee-break-card .card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #f0f0f0;
}

.coffee-break-card .card-image img {
  width: 100%;
  height: 100%;
  display: block;
  /* A featured image keeps its own shape (the first episode's is square). */
  object-fit: contain;
  transition: transform 0.3s ease;
}

/* A YouTube thumbnail has black bars above and below the picture; cover crops them. */
.coffee-break-card .card-image-video img {
  object-fit: cover;
}

.coffee-break-card:hover .card-image img {
  transform: scale(1.03);
}

.coffee-break-card .card-content {
  padding: 30px 35px 35px 35px;
}

.coffee-break-card .card-title {
  font-size: 28px;
  font-weight: bold;
  color: #131313;
  line-height: 1.4;
  margin-bottom: 12px;
  margin-top: 0;
}

.coffee-break-card .card-meta {
  font-size: 13px;
  color: #888;
  margin-bottom: 18px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.coffee-break-card .card-author {
  font-weight: 600;
  color: #666;
}

.coffee-break-card .card-separator {
  margin: 0 8px;
}

.coffee-break-card .card-date {
  color: #999;
}

.coffee-break-card .card-excerpt {
  font-size: 16px;
  line-height: 1.7;
  color: #555;
  margin-bottom: 18px;
}

.coffee-break-card .card-read-more {
  font-size: 14px;
  font-weight: 600;
  color: #8c6955;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 15px;
}

.coffee-break-card:hover .card-read-more {
  color: #6b5142;
}

/* No Posts Message */

.coffee-break-archive .no-posts {
  background-color: #fff;
  padding: 60px 40px;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.coffee-break-archive .no-posts p {
  font-size: 18px;
  color: #666;
  margin-bottom: 0;
}

/* Pagination: same look as the /answers blog (css/modern.css) */

.coffee-break-archive .pagination > * {
  background: var(--grey);
  border: 0;
  border-radius: 8px;
  color: var(--text);
  font-size: .85rem;
  letter-spacing: 0;
  text-transform: none;
  padding: 8px 14px;
}

.coffee-break-archive .pagination a {
  text-decoration: none !important;
}

.coffee-break-archive .pagination a:hover {
  background: var(--orange);
  color: #fff;
}

.coffee-break-archive .pagination .current {
  background: var(--text);
  color: #fff;
}

/* Responsive Design */

@media screen and (max-width: 767px) {
  .coffee-break-archive h1 {
    font-size: 32px;
  }

  .coffee-break-archive > .container > .row:first-child p {
    font-size: 16px;
  }

  .coffee-break-card .card-content {
    padding: 25px 20px 25px 20px;
  }

  .coffee-break-card .card-title {
    font-size: 24px;
  }

  .coffee-break-card .card-excerpt {
    font-size: 15px;
  }
}

/* /css/buttons.css */
/* Buttons: the dark pill, the green Submit / Free Quote buttons and the button blocks. */

/* Dark pill (Bootstrap .btn-primary and the "more" links) */

.btn.btn-primary,
.more a {
  background: #292929;
  border-radius: 1.55em;
  border: none;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
  color: #fff !important;
  margin-right: 10px;
  padding: .667em 1.333em;
}

/* Floats the Contact button next to the text. */
.contact.btn {
  float: left;
}

/* Green Submit button on WPForms */

.wpforms-submit {
  background: #00d084 !important;
  border-radius: 1.55em !important;
  color: #fff !important;
  font-size: 1.125em !important;
  padding: .667em 1.333em !important;
}

/* Free Quote and Ask buttons in the call-to-action box */

.call-to-action .freequote,
.call-to-action .ask {
  border-radius: 1.55em;
  color: #fff;
  font-size: 1.125em;
  padding: .667em 1.333em;
}

.call-to-action .freequote {
  background: #00d084;
  text-decoration: none !important;
}

/* Button blocks from the editor */

.wp-block-buttons {
  margin-top: 20px;
  margin-bottom: 20px;
  color: #fff;
}

/* Orange fill for every solid button block, whatever colour the editor saved on it
   (the old default was WordPress's green). Outline buttons keep their own style. */

.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--orange) !important;
  border-radius: 8px;
  color: #fff !important;
  font-size: 1rem;
  font-weight: 700;
  padding: 12px 24px;
  text-decoration: none !important;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background: var(--orange-dark) !important;
}

/* /css/cards.css */
/* Cards built with the editor's Group block (.wp-block-group.card) and Columns on phones. */

/* NOTE: the first rule below used to be written with a stray "wp-block-button" before it
   (so it read "wp-block-button .wp-block-group.card") and never matched anything. It was
   dropped when this file was split out; the hover and image rules that follow did apply. */

.wp-block-group.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.card .wp-block-button.is-style-outline a {
  color: #000 !important;
}

.card .wp-block-image,
.card figure {
  overflow: hidden;
}

.card img {
  height: 190px;
  width: 100%;
  transition: transform 0.3s ease;
  display: block;
}

.wp-block-group.card:hover img {
  transform: scale(1.05);
}

@media screen and (max-width: 767px) {
  .wp-block-group.card {
    margin-bottom: 15px;
  }

  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:not(:only-child) {
    flex-basis: unset !important;
    flex-grow: unset;
  }

  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:nth-child(2n) {
    margin-left: unset !important;
  }
}

/* /css/embeds.css */
/* Embedded video: the .videoWrapper box and the editor's YouTube / Vimeo embeds. */

/* .videoWrapper keeps a 16:9 box using padding */

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.videoWrapper iframe {
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.videoWrapper .wp-block-embed__wrapper {
  position: initial;
}

/* Embed blocks. Core's embed CSS isn't loaded on these pages, so the iframe kept its fixed
   width (500px) and ran off the side of a phone screen. This keeps the ratio the editor set
   and never lets the video outgrow its column. */

.wp-block-embed {
  max-width: 100%;
}

.wp-block-embed iframe {
  max-width: 100%;
}

.wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper {
  position: relative;
}

.wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper::before {
  content: "";
  display: block;
  padding-top: 50%;
}

.wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper::before {
  padding-top: 42.85%;
}

.wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper::before {
  padding-top: 50%;
}

.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before {
  padding-top: 56.25%;
}

.wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper::before {
  padding-top: 75%;
}

.wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper::before {
  padding-top: 100%;
}

.wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper::before {
  padding-top: 177.77%;
}

.wp-block-embed.wp-has-aspect-ratio iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* .videoWrapper already does this with padding, so don't count it twice. */
.videoWrapper .wp-block-embed__wrapper::before {
  display: none;
}

/* YouTube facade (video-embed.php): a thumbnail link that dopazo.js swaps for the player. */
.yt-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.videoWrapper .yt-facade, .wp-block-embed.wp-has-aspect-ratio .yt-facade {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  aspect-ratio: auto;
}

.yt-facade img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yt-facade .yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 48px;
  margin: -24px 0 0 -34px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.75);
  transition: background 0.15s;
}

.yt-facade .yt-play::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 27px;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent #fff;
}

.yt-facade:hover .yt-play, .yt-facade:focus .yt-play {
  background: #f00;
}

.yt-facade .yt-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* [dopazo_clips] (video-clips.php): one player and a list of clips beside it, below it on a phone. */
.clips {
  container-type: inline-size;
  margin: 24px 0;
}

.clips-inner {
  display: grid;
  gap: 14px;
}

.clips-panel[hidden] {
  display: none;
}

/* The player the thumbnail turns into when pressed: fill the column at 16:9 (the bare
   iframe is 300px wide, which left the video small next to the list). */
.clips-media iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

.clips-q {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.3;
  margin: 12px 0 6px;
}

.clips-b {
  color: #555;
  margin: 0;
}

.clips-list {
  display: grid;
  gap: 6px;
  align-content: start;
}

.clips a.clips-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
}

.clips a.clips-item:hover,
.clips a.clips-item:focus {
  background: #f6f2ef;
  color: inherit;
  text-decoration: none;
}

.clips a.clips-item[aria-current="true"] {
  background: #f0ebe7;
  border-color: #8c6955;
}

.clips-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background: #000;
}

.clips-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.clips-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 18px;
  margin: -9px 0 0 -13px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.72);
}

.clips-play::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 10px;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #fff;
}

.clips-it {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

.clips-len {
  display: block;
  font-size: 13px;
  color: #777;
}

@container (min-width: 620px) {
  .clips-inner {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }
}


/* /css/forms.css */
/* Forms: input resets, the bond dropdown and WPForms tweaks. */

/* Inputs (reset the browser look; keep native checkboxes and radios) */

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type=checkbox],
input[type=radio] {
  appearance: none;
}

input[type=checkbox] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
}

input[type=radio] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
}

.contact textarea {
  width: 100%;
}

/* Bond dropdown on the bond pages */

select.bond {
  border-radius: 2px;
  border: 1px solid #ccc;
  color: #333;
  height: 38px;
  padding-left: 6px;
  padding: 6px 10px;
}

.btn.bond {
  margin-left: 20px;
}

/* WPForms */

.wpforms-page-indicator-steps {
  white-space: nowrap;
  padding-right: 10px !important;
}

@media screen and (max-width: 767px) {
  div.wpforms-container-full .wpforms-form .wpforms-one-fourth {
    margin-left: 0px !important;
    width: 100% !important;
  }
}

/* /css/base.css */
/* Base styles: page spacing, fonts, headings, links, images and lists. Everything else builds on these. */

/* Page */

main {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Accounts for the sticky header when scrolling to a heading */
:target {
  scroll-margin-top: 80px;
}

* {
  text-decoration: none !important;
  outline: none !important;
}

/* Fonts */

body {
  color: #424141;
  font-style: normal;
  line-height: 26px;
}

h2,
h5,
body,
.inner_banner_breadcrumb #crumbs,
.inner_banner_main .subtitle {
  font-family: Verdana;
}

/* Headings */

h1 {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 2.5rem !important;
}

h2 {
  font-size: 25px;
  font-weight: bold;
  padding-top: 20px;
}

h3,
h4 {
  color: #5a5a5a;
  font-weight: bold;
  margin-bottom: 10px;
}

h3 {
  font-size: 20px;
}

h4 {
  font-size: 17px;
}

.info h1,
.info h2 {
  margin-bottom: 30px;
}

/* Links in the page body */

main a {
  color: #292929;
  text-decoration: underline !important;
}

/* Images and tables */

img {
  width: auto;
  max-width: 100%;
  height: auto;
  border: 0;
}

.content-area table {
  margin: 0px;
}

/* Lists */

@media screen and (max-width: 767px) {
  /* Don't indent lists on mobile. */
  ol {
    list-style-position: outside;
    padding-left: 30px;
  }

  li {
    margin-bottom: 10px;
  }
}

.wraper_blog_main ol {
  margin-top: 20px;
  margin-bottom: 20px;
}

.wraper_blog_main ol li {
  margin-bottom: 10px;
}

/* /css/info-page.css */
/* Info pages (info.php: coverage pages and the like): call-to-action box, contact box,
   question list, city list, info boxes and photos. */

/* Call-to-action box ("Have a Quick Question?") */

.call-to-action {
  background: #eaeaea;
  padding: 15px 15px 30px 15px;
  margin-bottom: 20px;
}

.call-to-action h2 {
  margin-bottom: 20px;
  padding-top: 0;
}

@media screen and (max-width: 767px) {
  .call-to-action {
    font-size: 0.8rem;
  }
}

/* Contact box */

.info .contact {
  background-color: #eaeaea;
  padding: 15px 15px 15px 15px;
  margin-bottom: 20px;
}

.info .contact h2 {
  padding-top: 0;
}

/* Question list under the title */

.info article > h1 + ol {
  margin-bottom: 40px;
}

/* City list */

.info table.citylist {
  margin-bottom: 30px;
}

/* The [citylist] shortcodes print their own markup, so core's Columns block
   CSS isn't loaded on pages whose content has no Columns block. */
.citylist-columns {
  display: flex;
  flex-wrap: wrap;
  column-gap: 4rem;
}

.citylist-columns > div {
  min-width: 14rem;
}

/* Photos */

/* A right-aligned image floats beside the text. Its size is set here, not in
 * the block: the Content-Security-Policy blocks inline style attributes, so
 * the block editor's width setting has no effect on the live site. On phones
 * there's no room for text beside it, so it sits above the text instead. */
.info .wp-block-image.alignright,
.info .wp-block-image .alignright {
  float: right;
  width: 50%;
}

.info .wp-block-image.alignright img,
.info .wp-block-image .alignright img {
  width: 100%;
}

@media screen and (max-width: 760px) {
  main.info.modern .wp-block-image.alignright,
  .info .wp-block-image .alignright {
    float: none;
    width: auto;
    max-width: none;
    margin: 0 0 1em;
  }
}

/* A full-width image (pages built on a Columns block) is cropped to a banner
 * so it doesn't fill the screen. object-position keeps the pen and clause
 * from the Surety Bonds photo in frame. */
.info .wp-block-image.size-full:not(.alignright) img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center 60%;
}

@media screen and (max-width: 760px) {
  .info .wp-block-image.size-full:not(.alignright) img {
    height: 200px;
  }
}

/* /css/popup.css */
/* Pop-ups: the video modal (home page) and the subscription pop-up (every page). */

/* Video modal */

.modal-dialog {
  margin: 10% auto 0;
  max-width: 800px;
}

.modal-content {
  width: 97%;
}

.modal-body {
  padding: 0;
  position: relative;
}

.close {
  background: 0 0;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 2rem;
  font-weight: normal;
  opacity: 1;
  padding: 0;
  position: absolute;
  right: -30px;
  top: 0;
  z-index: 999;
}

/* Subscription pop-up */

.subscribe-popup {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.subscribe-popup .popup-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 50%; /* Could be more or less, depending on screen size */
}

@media screen and (max-width: 767px) {
  .subscribe-popup .popup-content {
    margin: 20% auto;
    width: 90%;
  }
}

.subscribe-popup div.wpforms-container-full .wpforms-form .wpforms-field-label {
  margin: 0 0 20px 0;
}

.subscribe-popup .close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  position: inherit;
}

.subscribe-popup .close:hover,
.subscribe-popup .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* /css/footer.css */
/* Footer: contact columns and the copyright strip. */

/* Columns */

footer {
  background-color: #292929;
  color: #fff;
}

footer h2 {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 15px;
}

footer .container {
  padding-top: 45px;
}

footer .box {
  padding-bottom: 25px;
}

footer ul {
  padding-left: 20px;
}

footer a {
  color: #fff;
  text-decoration: none;
}

footer a img {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  height: 35px;
  padding-left: 15px;
}

/* Copyright strip */

.copyright {
  background-color: #333333;
}

.copyright > .container {
  padding-top: 15px;
  padding-bottom: 5px;
}

.copyright p {
  color: #e8e8e8;
  float: left;
  margin-top: 5px;
}

/* /css/header.css */
/* Header: the page banner with the breadcrumb trail, and the navigation bar. */

/* Page banner */

.wraper_inner_banner {
  background-color: #f1f1f1;
  padding-top: 70px;
}

.wraper_blog_main {
  padding-top: 20px;
}

.wraper_inner_banner_breadcrumb > .container {
  padding-top: 10px;
  padding-bottom: 10px;
}

.wraper_inner_banner_main > .container {
  padding-top: 15px;
}

.inner_banner_main .subtitle {
  line-height: 26px;
  font-weight: 600;
  font-style: normal;
  color: #161616;
  font-size: 18px;
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.24s ease-in-out;
  -moz-transition: opacity 0.24s ease-in-out;
  transition: opacity 0.24s ease-in-out;
}

/* Breadcrumbs */

.inner_banner_breadcrumb #crumbs {
  color: #131313;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 18px;
  opacity: 1;
  text-transform: uppercase;
  visibility: visible;
}

@media screen and (max-width: 768px) {
  .inner_banner_breadcrumb #crumbs {
    font-size: 9px;
  }
}

.inner_banner_breadcrumb #crumbs a {
  color: inherit;
}

.inner_banner_breadcrumb ol#crumbs {
  list-style: none;
  padding-inline-start: 0;
}

.inner_banner_breadcrumb #crumbs li {
  display: inline-block;
}

.inner_banner_breadcrumb #crumbs .gap {
  display: inline-block;
  vertical-align: top;
  margin-left: 6px;
  margin-right: 6px;
  font-size: 12px;
}

/* Navigation bar */

.navbar {
  background-color: #292929;
}

.navbar-dark .navbar-nav a.nav-link {
  color: #fff !important;
}

.navbar-brand img {
  height: 35px;
}

.navbar-brand .full {
  display: block;
}

.navbar-brand .mini {
  display: none;
}

@media screen and (max-width: 768px) {
  .navbar-brand .full {
    display: none;
  }

  .navbar-brand .mini {
    display: block;
  }
}

/* Logo on phones */
@media screen and (max-width: 767px) {
  .header_main .brand-logo img {
    max-width: 240px;
  }
}

/* Keeps the fixed bar below the WordPress admin bar */
.admin-bar .navbar.fixed-top {
  top: 32px;
}

/* WordPress admin bar on phones: it is 46px tall from 783px down and WordPress makes it scroll away below 601px,
   while the fixed bar stayed put. Pin the admin bar too so the two stay together, and sit the bar under it. */
@media screen and (max-width: 782px) {
  .admin-bar .navbar.fixed-top {
    top: 46px;
  }
}

@media screen and (max-width: 600px) {
  #wpadminbar {
    position: fixed;
  }
}

/* /css/page.css */
/* Styles for single pages: About (team), 404, Contact, Companies and Bonds. */

/* About */

.team .team-item {
  float: left;
  margin-bottom: 10px;
  padding: 15px 15px 15px 15px;
  width: 250px;
}

.team .team-item .holder .pic {
  position: relative;
  overflow: hidden;
}

.team .team-item .holder .pic .holder img {
  width: 100%;
}

.team .team-item > .holder > .pic > .holder {
  left: 0px;
  width: 100%;
}

.team .team-item .holder .data {
  background-color: rgba(0,0,0,0.03);
  border-top: none;
  border: 1px #eaeaea solid;
  color: #6b6b6b;
  font-size: 15px;
  line-height: 23px;
  padding: 15px 20px 22px 20px;
  text-align: left;
}

.team .team-item .holder .data h3 {
  margin-bottom: 7px;
  font-weight: 700;
  font-size: 18px;
  color: #08276e;
  line-height: 28px;
}

@media screen and (max-width: 760px) {
  .team .team-item {
  float: none;
  margin: 0 auto;
  width: 300px;
  }
}

/* 404 */

.four-o-four {
  text-align: center;
  padding: 100px 0px 100px 0px;
}

.four-o-four img {
  padding-top: 40px;
}

@media screen and (max-width: 760px) {
  .four-o-four {
    padding: 50px 0px 50px 0px;
  }

  .four-o-four img {
    padding-top: 20px;
  }
}

/* Contact */

.contact .form {
  padding-top: 73px;
  padding-bottom: 73px;
  background-color: #f7f7f7;
}

.contact .form .col-xs-6 {
  margin: 0 auto;
  padding: 20px;
  flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .contact .form .col-xs-6 {
    flex-basis: 50%;
    max-width: 50%;
  }
}

/* The three ways to reach us (phone, email, client dashboard) are cards, in the same font and style as the
   redesigned pages. The form band and the map below are unchanged. */
.contact .info {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 0;
  padding-top: 40px;
  padding-bottom: 40px;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.contact .info > div {
  flex: none;
  width: auto;
  max-width: none;
  padding: 28px 24px 30px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
}

.contact .info img {
  display: block;
  height: 56px;
  width: auto;
  margin: 0 auto 14px;
}

.contact .info h2 {
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: .04em;
  margin: 0 0 10px;
  padding: 0;
}

.contact .info p {
  margin: 0;
  line-height: 1.5;
}

.contact .info p br {
  display: none;
}

.contact .info a {
  display: block;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: anywhere;
  margin: 16px auto 0;
  padding: 11px 20px;
  background: #f07d1a;
  border-radius: 8px;
  color: #fff;
  font-weight: 700;
  text-decoration: none !important;
}

.contact .info a:hover {
  background: #d96a0b;
  color: #fff;
}

.contact img {
  height: 70px;
}

.contact {
  margin-top: 40px;
}

/* Contact form Submit: same orange 8px button as the other redesigned pages (elements.css forces the green pill with !important). */
.contact div.wpforms-container-full .wpforms-form .wpforms-submit {
  background: #f07d1a !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 1.05rem !important;
  padding: 13px 24px !important;
  height: auto !important;
  line-height: 1.5 !important;
  cursor: pointer;
}

.contact div.wpforms-container-full .wpforms-form .wpforms-submit:hover {
  background: #d96a0b !important;
}

/* Phones: trim the gap between the breadcrumbs and the first card. */
@media screen and (max-width: 767px) {
  .contact {
    margin-top: 0;
  }

  .contact .info {
    padding-top: 20px;
    padding-bottom: 24px;
  }

  .contact .info a {
    padding: 11px 14px;
    font-size: .95rem;
  }
}

@media screen and (min-width: 992px) {
  .contact .info {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-top: 73px;
    padding-bottom: 73px;
  }
}

/* Companies */

.companies .row {
  padding-bottom: 40px;
}

/* Bonds */

.bond-table a {
  background-color: #00d084;
  border-radius: 9999px;
  color: #fff;
  font-size: .8em;
  padding: 5px;
  white-space: nowrap;
}

.bond-table table td {
  padding: 5px;
}

/* /style.css */
/*
 Theme Name:   Dopazo 2019
 Description:  Dopazo & Associates theme for 2019.
*/

/* Colors shared by the redesigned pages (modern, PPC, home, bond, info hub).
   Use these instead of typing the hex codes again. */
:root {
  --orange: #f07d1a;
  --orange-dark: #d96a0c;
  --text: #111;
  --ink: #1f2328;
  --grey: #f3f3f3;
}

/* /css/widget.css */
/* Bond price widget (the [bond] boxes with a price and a Buy button) and its tabs. */

.widget .bond {
  color: white;
  margin: 5px;
  width: 100%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
  background-blend-mode: multiply,multiply;
  border-radius: 10px;
}

@media screen and (min-width: 767px) {
  .widget .bond {
    width: 200px;
  }
}

.widget .bond .price {
  min-height: 120px;
  width: 100%;
  padding: 15px;
  text-align: center;
}

.widget .bond .price p {
  font-size: 32px;
  font-weight: bold;
}

.widget .bond .buy {
  width: 100%;
  text-align: center;
}

.widget .bond .btn {
  width: 100%;
  border-radius: 0px 0px 10px 10px;
  background: #00d084;
}

.widget .bond .btn:hover {
  color: #fff;
  background: #00c073;
}

.widget .tab-content {
  margin-top: 50px;
  margin-bottom: 50px;
}

.widget .tab-content .row {
  text-align: center;
}

.widget .nav {
  float: none;
}