@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
/*@import 'font.css';*/
html, body {
  height: 100%;
}

body {
  font-family: "Inter", "Open Sans", Arial, Helvetica, sans-serif !important;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

.offset-8 {
  display: flex;
  justify-content: flex-end;
  margin-left: unset !important;
}

[v-cloak] {
  display: none;
}

.form_styles label {
  padding-right: 0;
  padding-left: 4px;
}

/*Start: For Bootstrap columns ... row-grid adds 15px of space vertically between new rows that are created when columns wrap into the next row when the screen size gets narrow.
         Only do this when screen is 768 or less.
        row-grid1: adds top margin to the second 'row' created by column wrapping.
        row-grid2; adds top margin to the third 'row' created by column wrapping - needed this because in forms we sometimes also have a label which becomes the first row when the screen gets very narrow.
*/
/*.row.row-grid1 [class*="col-"] + [class*="col-"] {
    margin-top: 15px;
}

@media screen and (min-width: 768px) {
    .row.row-grid1 [class*="col-"] + [class*="col-"] {
        margin-top: 0;
    }

}

.row.row-grid2 [class*="col-"] + [class*="col-"] + [class*="col-"] {
    margin-top: 15px;
}

@media screen and (min-width: 768px) {
    .row.row-grid2 [class*="col-"] + [class*="col-"] + [class*="col-"] {
        margin-top: 0;
    }
}*/
/*End*/
/* CSS for iPhone-sized devices */
@media only screen and (max-width: 390px) {
  .row {
    margin-right: unset !important;
  }
  .nav-link {
    font-size: 1.2rem !important;
  }
}
.cover-backgroundonly {
  background: #0077E5;
}

.background-primary {
  background: #0077E5;
}

.cover {
  z-index: -1;
  background: #FFFFFF;
  padding: 100px 0 70px 0;
  padding-top: 192px;
  margin-bottom: 0px;
}

.cover-nomargin {
  margin: 0;
}

.cover.cover-small {
  color: black;
  padding: 30px 0;
  padding-top: 162px;
  text-align: center;
}

.cover.cover-small h1 {
  font-weight: 300;
  font-size: 3.5em;
  margin-top: 0;
  margin-bottom: 0;
}

.cover.cover-small p {
  font-size: 1.3em;
  width: 70%;
  margin: 0 auto;
  /*padding: 0 100px;*/
}

.cover a {
  color: #0421C8;
}

.pane_text h1 {
  font-weight: 100;
}

.pane_text p, .pane_text li {
  color: gray;
  padding-bottom: 11px;
}

.social-image {
  width: 22px;
}

.visible-bullets {
  list-style: disc !important;
  padding-left: 40px !important;
}

.pane {
  margin-bottom: 100px;
}
.pane.border-bottom {
  margin-bottom: 100px;
  padding-bottom: 100px;
  border-bottom: 1px solid #eff1f2;
}
.pane.img-left {
  direction: rtl;
}
.pane.img-left .text {
  text-align: left;
  direction: ltr;
}
.pane.img-left .text li {
  text-align: left;
}
.pane.img-left .text li a {
  text-align: left;
}
.pane .text {
  width: 46%;
  vertical-align: middle;
  display: inline-block;
  padding-left: 1%;
  box-sizing: border-box;
}
.pane .img-wrap {
  width: 50%;
  vertical-align: middle;
  display: inline-block;
  text-align: center;
}
.pane img {
  height: 352px;
  padding: 0 2%;
  display: inline-block;
  box-sizing: border-box;
}
.pane .text h1 {
  margin-top: 40px;
  font-size: 41px;
  margin-bottom: 20px;
  font-weight: 100;
}
.pane .text p, .pane .text li {
  color: gray;
  padding-bottom: 11px;
  margin-right: 56px;
}
.pane .text p.border-bottom {
  line-height: 1.6;
  border-bottom: 1px solid gray;
}
.pane .text li {
  line-height: 2;
}
.pane .text li a {
  color: rgb(0, 176, 240);
}
.pane .text li a:hover {
  color: rgb(0, 112, 192);
}
.pane #arrow {
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  width: 10px;
  height: 10px;
  transform: rotate(-45deg);
  margin-top: 40px;
}
.pane .text ul li {
  position: relative;
  padding-bottom: 10px;
}
.pane .text ul:not(.no-arrow) {
  list-style: none;
}
.pane .text ul:not(.no-arrow) li:before {
  content: "";
  position: absolute;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  width: 10px;
  height: 10px;
  top: calc(50% - 5px);
  left: -24px;
  transform: translateY(-50%) rotate(-45deg);
}
.pane .text .states {
  font-size: 20px;
}
.pane .text .affidavit-state-link:hover {
  color: rgb(0, 112, 192);
}

.pane .text.mobile-text {
  display: none;
}

a {
  color: #00b0f0;
  text-decoration: none;
}

/* UTILITY CLASSES */
.trademark {
  font-size: 17px;
  position: relative;
  top: -11px;
}

.btn-link {
  border: 1px solid white;
  padding: 0 20px;
  border-radius: 4px;
  transition: background 200ms, color 200ms;
}

.btn-link:hover {
  background: white;
  color: #4792c9;
}

.btn-link-primary {
  background: #0077E5;
  color: white;
  padding: 10px 20px;
}
.btn-link-primary:hover {
  background: #0077E5;
  color: white;
}

.btn-link-accent {
  padding: 10px 20px;
  color: white;
  background: #4BCE0F;
}
.btn-link-accent:hover {
  background: #4BCE0F;
  color: white;
}

h1, h2, h3 {
  font-family: "Inter", "Open Sans", Arial, Helvetica, sans-serif;
}

.center-panel-wrap {
  text-align: center;
  margin-bottom: 50px;
}

.center-panel {
  text-align: left;
  display: inline-block;
  color: #737A97;
  max-width: 1000px;
  padding: 0 30px;
}
.center-panel ul {
  line-height: 2;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
  margin-bottom: 25px;
}

.light-header {
  font-weight: normal;
  color: black;
  font-size: 30px;
}