minor

public/css/layout.css

@@ -0,0 +1,556 @@
+html {
+  scroll-behavior: smooth;
+    height: 100%;
+}
+body {
+    background: #FFF;
+    min-height: 100%;
+}
+* {
+    margin: 0;
+    padding: 0;
+}
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  width: 100%;
+}
+footer {
+  margin-top: auto;
+}
+a:hover {
+  text-decoration: none;
+}
+:root {
+  --pry-color: #154159;
+  --pry-dark-color: #1428AC;
+  --sec-color: #fff5cc;
+}
+::-moz-selection { background: var(--pry-color); color: #fff; }
+::selection { background: var(--pry-color); color: #fff; }
+
+nav.navbar {
+  position: relative;
+  width: 100%;
+  background-color: #fff;
+  z-index: 100;
+  padding: 0;
+}
+.logo, .small {
+  width: 250px;
+  transition: 0.3s;
+}
+.small {
+  transition: 0.3s;
+}
+nav .container {
+  height: 90px;
+}
+.navbar-nav {
+  margin-left: 240px;
+  margin-bottom: 0;
+}
+.navbar-nav li{
+  display: inline;
+  padding: 0 5px;
+  font-size: 15px;
+}
+.navbar-nav li a {
+  color: #000000;
+  font-weight: 500;
+}
+.navbar-nav li a:hover {
+  color: var(--pry-color);
+}
+.nav-item a {
+  color: var(--pry-dark-color);
+}
+.nav-item a:hover {
+  color: var(--pry-color);
+}
+.nav-links {
+  font-size: 13px;
+}
+.nav-links a {
+  color: var(--pry-color);
+}
+.top h4 {
+  font-size: 45px;
+  font-weight: 700;
+}
+.top p {
+  font-size: 16px;
+  margin-top: 20px;
+}
+.call, .call-light {
+  padding: 10px 20px;
+  border: 1px solid var(--pry-color);
+  width: fit-content;
+}
+.call-light {
+  border-color:#fff;
+}
+.call a, .call-light a{
+  font-size: 30px;
+  color: var(--pry-color);
+  font-weight: 700;
+}
+.call-light a {
+  color: #fff;
+}
+.call:hover {
+  border-color: var(--pry-color);
+}
+.announcement {
+  display: flex;
+  margin-top: 50px;
+}
+.special {
+  text-transform: uppercase;
+  background-color: #154159;
+  flex-basis: 40%;
+}
+.special img {
+  width: 100%;
+  height: 220px;
+}
+.special h4{
+  font-size: 18px;
+  color: #fff;
+  font-weight: 400;
+  text-align: center;
+  margin: 20px 0;
+}
+.special-content {
+  flex-basis: 60%;
+  padding: 0 10px;
+  background-color:var(--sec-color);
+}
+.about {
+  padding: 80px 0;
+}
+.about img, .hope img {
+  width: 100%;
+}
+p {
+  font-size: 20px;
+}
+
+.btn-pry, .blue-card, .btn-pry-light {
+  background-color: var(--pry-color);
+  color: #fff;
+  border-radius: 0;
+  font-size: 18px;
+  font-weight: 500;
+}
+.btn-pry-light {
+  color: var(--pry-color);
+  border: 1px solid var(--pry-color);
+  background: #fff;
+}
+.btn-pry:hover, .blue-card:hover {
+  background-color: var(--pry-color);
+  color: #fff;
+}
+.btn-pry-light {
+  border: 1px solid #fff;
+}
+.white-card {
+  border-left:3px solid var(--pry-color);
+  padding: 20px;
+  background-color: #ffffff;
+}
+.white-card p {
+  margin-bottom: 13px;
+}
+.green-card {
+  border-left:6px solid var(--sec-color);
+  border-right:3px solid var(--pry-color);
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  width: 100%;
+  background-color: #F1F2F2;
+  transition: 0.3s;
+  color: var(--pry-color);
+}
+.green-card:hover {
+  background-color: var(--sec-color);
+  transition: 0.3s;
+}
+.outreach-container {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 20px;
+}
+.outreach-container div {
+  margin-right: 20px;
+  margin-bottom: 20px;
+  width: 250px;
+  padding: 10px;
+  cursor: pointer;
+}
+.outreach-container p {
+  font-size: 17px;
+  font-weight: 700;
+  letter-spacing: 1.1px;
+}
+.outreach-container img {
+  width: 50px;
+  margin-right: 10px;
+}
+.flex-container {
+  display: flex;
+  align-items: center;
+}
+.flex-container div {
+  flex-basis: 60%;
+}
+.flex-container .size-4 {
+  flex-basis: 35%;
+  margin-right: 12px;
+}
+.bg-grey{
+  background-color: #F1F2F2;
+}
+.steps {
+  background-color: var(--sec-color);
+  border-bottom: 2px solid var(--pry-color);
+  position: relative;
+}
+.title {
+  font-weight: 500;
+  font-size: 30px;
+}
+.popper {
+  cursor: pointer;
+}
+.popover {
+  padding: 12px;
+}
+.popover h6 {
+  font-size: 18px;
+}
+/* .steps-container {
+  display: none;
+} */
+.steps-content {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.steps-content .content {
+  flex-basis: 45%;
+  background-color: #ffffff;
+  border-left:2px solid var(--pry-color);
+  padding: 20px;
+  margin-right: 20px;
+  margin-bottom: 20px;
+  font-size: 18px;
+}
+.plus {
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  bottom:-20px;
+  left:0;
+}
+.list {
+  list-style:none;
+  padding: 0;
+  margin-left: 0 !important;
+}
+.list li::before{
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  content: "\f105";
+  font-size: 18px;
+  margin-left: 10px;
+  padding-right: 10px !important;
+  color:var(--pry-color);
+  border-radius: 100%;
+}
+.plus a::before{
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  content: "\f055";
+  font-size: 25px;
+  color:var(--pry-dark-color);
+  border-radius: 100%;
+}
+.minus a::before{
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  content: "\f056";
+  font-size: 25px;
+  color:var(--pry-dark-color);
+  border-radius: 100%;
+}
+.lifeline {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.lifeline p{
+  width: 50%;
+  margin-bottom: 10px;
+  font-weight: 700;
+}
+.lifeline img{
+  width: 25%;
+}
+.role-container {
+  display: flex;
+}
+.role-container .content {
+  width: 50%;
+  background-color: #ffffff;
+  padding: 15px;
+  border: 2px solid #fff;
+  margin-right: 10px;
+}
+.role-container .content p {
+  margin-bottom: 12px;
+  font-size: 18px;
+}
+.role-container .content h5 {
+  letter-spacing: 1.1px;
+  font-size: 17px;
+  font-weight: bold;
+  color: var(--pry-color);
+}
+.role-container .content:hover {
+  border: 2px solid var(--pry-color);
+  cursor: pointer;
+}
+.contact {
+  display: flex;
+  justify-content: space-between;
+}
+.contact > div {
+  width: 48%;
+  padding: 20px;
+}
+.contact .phone {
+  background-color: var(--pry-color);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #fff;
+}
+.links ul li{
+  display: inline;
+  margin-right: 20px;
+  font-size: 20px;
+  text-transform: uppercase;
+  font-weight: 500;
+}
+.social {
+  display: flex;
+  margin-top: 30px;
+}
+.social a {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  font-size: 25px;
+  border: 1.5px solid var(--pry-color);
+  color: var(--pry-color);
+  margin-right: 10px;
+}
+.social a:hover {
+  background-color: var(--pry-color);
+  color: #fff;
+}
+.partners {
+  text-align: right;
+}
+.partners p, .partners p a{
+  font-size: 15px;
+  font-weight: 500;
+  margin-bottom: 12px;
+  color: var(--pry-color);
+}
+.partners p a:hover {
+  color: var(--pry-dark-color);
+}
+.footer {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.footer .links a {
+  color: var(--pry-color);
+}
+.footer .images img{
+  filter: grayscale(100%);
+  opacity: 0.6;
+  margin-left: 10px;
+}
+.footer .images img:hover{
+  filter: grayscale(0%);
+  opacity: 1;
+}
+footer small {
+  font-size: 12px;
+}
+.content-flex {
+  display: flex;
+  margin-top: 70px;
+}
+.content-flex .sidebar {
+  flex-basis: 25%;
+  border-right: 1px solid #ddd;
+}
+.content-flex .content {
+  flex-basis: 75%;
+}
+.img-overlay {
+  background:rgb(21, 65, 89);
+}
+.img-overlay img{
+  width: 100%;
+  opacity: 0.6;
+}
+.mobile {
+  display: none;
+}
+@media screen and (max-width:991px) {
+  .announcement {
+    display: block;
+  }
+  .special h4 {
+    padding: 10px 0;
+    margin-bottom: 0;
+  }
+  .special img {
+    display: none;
+  }
+  .special-content {
+    padding: 10px;
+  }
+  .special-content p {
+    margin: 0;
+  }
+  .title {
+    font-size: 25px;
+  }
+  .outreach-container div, .blue-card {
+    max-width: 100%;
+    width:100%;
+    margin-right: 0;
+  }
+  .flex-container .size-4 {
+    flex-basis: 40%;
+  }
+  .contact  {
+    display: block;
+  }
+  .contact > div {
+    width: 100%;
+    margin-bottom: 20px;
+  }
+  .footer, .social{
+    justify-content: center;
+    text-align: center;
+  }
+  .partners {
+    margin-top: 20px;
+    text-align: center;
+  }
+  .role-container {
+    flex-wrap: wrap;
+  }
+  .role-container .content {
+    width: 100%;
+    margin-bottom: 20px;
+  }
+  .lifeline p {
+    width: 40%;
+  }
+  .btn-pry, .blue-card, .btn-pry-light {
+    font-size: 16px;
+  }
+  #navBar {
+    position: absolute;
+    width: 100%;
+    background-color: #ffffff;
+    top: 70px;
+    right: 0;
+    padding: 10px;
+    border-top: 1px solid #ddd;
+  }
+  .navbar-nav {
+    margin-left: 0;
+  }
+  .nav-item {
+    border-bottom: 1px solid #ddd;
+  }
+  .nav-links > div{
+    text-align: left !important;
+    margin-top: 10px;
+  }
+  .logo {
+    width: 220px;
+  }
+  .navbar-toggler {
+    color: var(--pry-color);
+    border:1px solid var(--pry-color);
+    background-color: #fff;
+    padding: 12px;
+    margin-bottom: 0;
+    margin-right: 12px;
+  }
+  .navbar-toggler:hover {
+    background-color: var(--pry-color);
+    color: #fff;
+  }
+  nav {
+    padding: 0 10px;
+  }
+}
+
+@media screen and (max-width:767px) {
+   .web {
+     display: none;
+   }
+   .mobile {
+     display: block;
+   }
+  .flex-container, .content-flex {
+    display: block;
+  }
+  .img-overlay, .sidebar h4 {
+    display: none;
+  }
+  .content-flex .sidebar {
+    padding-top: 20px;
+    border:none;
+  }
+  .content-flex .content {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+  .flex-container .size-4 {
+    margin-bottom: 20px;
+  }
+  .steps-container .content {
+    flex-basis: 100%;
+    margin-right: 0;
+  }
+  .lifeline {
+    display: block;
+    text-align: center;
+  }
+  .lifeline p {
+    width: 100%;
+  }
+}
+
+.line-height-110 {
+    line-height: 110%;
+}

public/css/lh.css

@@ -0,0 +1,240 @@
+@font-face {
+    font-family: 'Euclid Circular';
+    src: url("fonts/EuclidCircularA-Regular.ttf") format("truetype");
+}
+.lh-container *:not(i) {
+    font-family: 'Euclid Circular';
+}
+.lh-container .text-primary {
+    color: #2AB7CA !important;
+}
+.lh-container .text-secondary-light {
+    color: #52525277 !important;
+}
+.lh-container .bg-primary {
+    background-color: #2AB7CA !important;
+}
+
+.lh-container .btn-primary {
+    background-color: #2AB7CA;
+    border-color: #2AB7CA;
+    color: #fff;
+    font-weight: bold;
+}
+.lh-container .btn-success {
+    background-color: #2AB7CA;
+    border-color: #2AB7CA;
+    color: #fff;
+    font-weight: bold;
+}
+.lh-container .text-10,
+.lh-container .text-10 * {
+    font-size: 10px !important;
+    letter-spacing: 1px;
+}
+.lh-container .text-12,
+.lh-container .text-12 * {
+    font-size: 12px !important;
+    letter-spacing: 0.5px;
+}
+.lh-container .text-14,
+.lh-container .text-14 * {
+    font-size: 14px !important;
+    letter-spacing: 0.75px;
+}
+.lh-container .text-17,
+.lh-container .text-17 * {
+    font-size: 17px !important;
+    letter-spacing: 0.75px;
+}
+.lh-container .text-15,
+.lh-container .text-15 * {
+    font-size: 15px !important;
+    letter-spacing: 0.5px;
+}
+.lh-container .text-40,
+.lh-container .text-40 * {
+    font-size: 40px !important;
+}
+.lh-container .font-weight-medium {
+    font-weight: 500 !important;
+}
+.lh-container h1 {
+    font-size: 26px !important;
+}
+.lh-container h2 {
+    font-size: 19px !important;
+}
+.lh-container .lh-section {
+    border-top: 3px solid #F2F2F2;
+    background: #fff;
+}
+.lh-container .embed {
+  width: 100vw;
+  min-height: 52vw;
+  border:none;
+}
+@media all and (max-width: 767px) {
+    .lh-container .lh-section {
+        border-top: 0;
+    }
+    .lh-container .embed {
+      min-height: 100vh;
+    }
+}
+.lh-container .lh-section:last-child {
+    border-bottom: 3px solid #F2F2F2;
+}
+.lh-container .lh-well {
+    background: #F4F5F9;
+    padding: 1.5rem;
+}
+.lh-container .video-container {
+    height: 360px;
+}
+.lh-container .lh-form-container {
+    margin-top: 1rem;
+}
+@media all and (min-width: 767px) {
+    .lh-container .lh-form-container {
+        width: 540px;
+        margin: 2rem auto;
+    }
+}
+.lh-container .lh-form-container .form {
+  background: #FFFFFF;
+  border: 2px solid rgba(0, 0, 0, 0.06);
+  box-sizing: border-box;
+  box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.03);
+  position: relative;
+  padding: 60px 50px 50px 50px;
+  margin: 60px 0;
+}
+.icon_wrap {
+  position: absolute;
+  top:-50px;
+  right: calc(50% - 50px);
+  background-color: #ffffff;
+  border: 2px solid rgba(0, 0, 0, 0.06);
+  height: 100px;
+  width: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+}
+.icon_wrap img {
+  width: 60%;
+}
+.lh-container .lh-form-container .form input {
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  box-sizing: border-box;
+  border-radius: 4px;
+  padding: 25px 10px;
+}
+
+
+.lh-container .profile-right-column {
+    width: 350px;
+    min-width: 350px;
+    max-width: 350px;
+    background: #EDEEF2;
+}
+.lh-container .profile-right-column ul {
+    margin: 0;
+    padding-left: 0;
+    list-style-position: outside;
+    margin-left: 1.25rem;
+}
+.lh-container .pro-picture {
+    width: 135px;
+    height: 135px;
+    min-width: 135px;
+    min-height: 135px;
+    position: relative;
+}
+@media all and (max-width: 767px) {
+    .lh-container .pro-picture {
+        min-width: 50px;
+        min-height: 50px;
+        width: 50px;
+        height: 50px;
+        border-radius: 100%;
+        overflow: hidden;
+    }
+}
+.lh-container .pro-picture.pro-picture-sm {
+    width: 100px;
+    height: 100px;
+    min-width: 100px;
+    min-height: 100px;
+    position: relative;
+}
+.lh-container .presence-indicator {
+    width: 14px;
+    height: 14px;
+    background: #999;
+    border-radius: 100%;
+}
+.lh-container .presence-indicator.present {
+    background: #6BA84F;
+}
+
+.lh-container .pro-picture .presence-indicator {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    top: calc(100% - 13px);
+    left: calc(100% - 13px);
+    border: 3px solid #fff;
+}
+.lh-container .pro-picture.pro-picture-sm .presence-indicator {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    top: calc(100% - 10px);
+    left: calc(100% - 10px);
+    border: 3px solid #fff;
+}
+.lh-container .pro-verified-icon {
+    width: 25px;
+    height: 25px;
+}
+.lh-container .service-item {
+    background: #EDEEF2;
+    width: calc(33% - 4px);
+    border-radius: 10px;
+    margin-right: 4px;
+    margin-bottom: 4px;
+    padding: 3px 8px;
+    font-size: 14px;
+    font-weight: 500;
+}
+.lh-container .profile-heading {
+    font-size: 20px;
+    line-height: 1.35;
+}
+.lh-container .text-aqua {
+    color: #2AB7CA !important;
+}
+.lh-container .bg-aqua {
+    background-color: #2AB7CA !important;
+}
+.lh-container .font-size-normal {
+    font-size: 1rem;
+}
+.lh-container .device-block {
+    overflow: hidden;
+    border-radius: 10px;
+}
+.lh-container .floating-signup {
+    bottom: 0;
+}
+.single-form-heading {
+    font-size: 40px !important;
+}
+@media all and (max-width: 767px) {
+    .single-form-heading {
+        font-size: 25px !important;
+    }
+}

public/css/pristine.css

@@ -0,0 +1,937 @@
+@font-face {
+  font-family: 'Ivar';
+  src: url("fonts/ivarNostalgia.otf") format("opentype");
+}
+@font-face {
+  font-family: 'IvarSemiBold';
+  src: url("ivar/IvarText-SemiBold.otf") format("opentype");
+}
+@font-face {
+  font-family: 'Euclid';
+  src: url('euclid/EuclidCircularA-Regular.woff');
+}
+@font-face {
+  font-family: 'Euclid-bold';
+  src: url('euclid/EuclidCircularA-Medium.woff');
+}
+@font-face {
+  font-family: 'Graphik';
+  src: url("fonts/Graphik-Regular.otf") format("opentype");
+}
+@media screen and (min-width:1200px) {
+  .container {
+    /* max-width: 1130px; */
+  }
+}
+.pristine h4 {
+  font-size: 28px !important;
+}
+.pristine p {
+  font-size: 16px !important;
+  margin-top: 0;
+}
+.pristine a, .text-pry {
+  color: #2AB7CA;
+}
+a.text-pry:hover {
+  color: #196e79;
+}
+.bg-light-pry {
+  background: #E6F8FB;
+}
+.badge {
+  font-family: 'IvarSemiBold' !important;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 16px;
+  /* letter-spacing: -0.24px; */
+  border-radius: 10px;
+  padding: 4px 12px;
+  display: flex;
+  align-items: center;
+}
+.badge.bg-green {
+  background-color: #EDFAF1;
+  color: #34C759;
+}
+.badge.bg-purple {
+  background-color: #EEEEFB;
+  color: #5856D6;
+}
+.badge.bg-yellow {
+  background-color: #FFF7EB;
+  color: #FF9500;
+}
+.badge.bg-red {
+  background-color: #FFECEB;
+  color: #FF3B30;
+}
+.pristine .pro-info h5{
+  font-size: 16px;
+}
+.pristine .pro-info p{
+  font-size: 13px !important;
+  color: #636366;
+}
+.grey-pills p {
+  background-color: #F1F4F4;
+  display: inline-block;
+  color: #2AB7CA !important;
+  border-radius: 100px;
+  padding: 6px 20px;
+  font-size: 15px;
+  margin-bottom: 8px;
+}
+.hidden {
+  display: none;
+}
+.bg-aqua hr {
+  background-color: #ffffff;
+  opacity: 0.2;
+}
+.pristine-block {
+  display: flex;
+  justify-content: space-between;
+}
+.device-block {
+  font-size: 17px !important;
+  border-radius: 0 !important;
+  max-width: 256px;
+  margin-top: 8px;
+}
+.device-title {
+  padding: 13px 26px;
+  min-height: 74px;
+}
+.device-block p {
+  font-size: 14px !important;
+  line-height: 19px;
+  letter-spacing: -0.15px;
+}
+.monitoring_btn {
+  padding: 13px 0 11px 0;
+}
+.font_30 {
+  font-size: 30px !important;
+}
+.pristine-program {
+  padding: 37px 12px;
+}
+.pristine-program .subtitle {
+  margin-bottom: 40px;
+}
+.pristine-program > div {
+  letter-spacing: 0.38px;
+  line-height: 24px;
+  padding-top: 38px;
+  /* font-size: 20px !important; */
+}
+.pristine-program p{
+  font-size: 20px !important;
+  line-height: 24px;
+  letter-spacing: 0.38px;
+  color: #1C1C1E;
+}
+.pristine-program .context {
+  color: #636366;
+  font-family: 'Graphik';
+}
+.access {
+  padding-top: 44px;
+  padding-bottom: 25px;
+}
+.waves {
+  background-image: url('/img/waves.svg');
+  background-size: cover;
+}
+.top-covid, .waves {
+  min-height: 335px;
+}
+.top-covid .title{
+  font-family: 'Ivar';
+  font-style: normal;
+  font-weight: 300 !important;
+  font-size: 54px;
+  line-height: 110%;
+  text-align: center;
+  letter-spacing: 0.374px;
+  color: #1C1C1E;
+  margin: 0;
+  padding-top: 58px;
+}
+.top-covid h5, .enroll{
+  font-size: 35px;
+  margin-top: 14px;
+  font-weight: 500;
+  letter-spacing: 0.374px;
+  line-height: 41px;
+}
+.top-covid h6{
+  margin-top: 31px;
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 24px;
+  text-align: center;
+  letter-spacing: 0.38px;
+}
+h5 {
+  font-size: 20px;
+  letter-spacing: 0.38px;
+}
+.profile-pic {
+  position: relative;
+  width: 115px;
+  height: 115px;
+  overflow: hidden;
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.profile-pic.profile-pic-sm {
+  width: 66px;
+  height: 66px;
+  border: 2px solid #fff;
+}
+.profile-pic .profile{
+  max-width: 100%;
+}
+.profile-pic .icon{
+  position: absolute;
+  bottom: -10px;
+  right: -1px;
+}
+.setup {
+  margin-top: 6px;
+}
+.setup .content{
+  margin-left: 36px;
+}
+.subtitle, .setup p {
+  font-size: 34px;
+  font-weight: 600;
+  line-height: 41px;
+  letter-spacing: 0.34px;
+}
+.flex-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.link {
+  display: flex;
+  align-items: center;
+  position: relative;
+  margin-top: 8px;
+  margin-right: 15px;
+}
+.link span:first-child {
+  font-size: 16px;
+  line-height: 20px;
+  background-color: var(--pry-color);
+  color: #fff;
+  padding: 5px 10px;
+  border-radius: 40px;
+  padding-right: 50px;
+  margin-right: 10px;
+}
+.link .icon_wrap {
+  position: absolute;
+  height: 70px;
+  width: 70px;
+  box-shadow: 0px 100px 80px rgba(190, 190, 190, 0.07), 0px 41.7776px 33.4221px rgba(190, 190, 190, 0.0503198), 0px 22.3363px 17.869px rgba(190, 190, 190, 0.0417275), 0px 12.5216px 10.0172px rgba(190, 190, 190, 0.035), 0px 6.6501px 5.32008px rgba(190, 190, 190, 0.0282725), 0px 2.76726px 2.21381px rgba(190, 190, 190, 0.0196802);
+  right: -15px;
+  top:-65%;
+}
+.flex-patient {
+  display: flex;
+  flex-wrap: wrap;
+}
+.flex-patient > div {
+  width: 31.5%;
+  margin-right: 20px;
+  margin-bottom: 20px;
+}
+.btn-orange, .btn-orange-outline {
+  /*font-size: 17px;*/
+  font-weight: bold;
+  background-color: #FB6107;
+  color: #fff !important;
+  padding: 6px 20px;
+  border-radius: 4px !important;
+  border:1px solid #FB6107;
+}
+.btn-orange:hover {
+  background-color: #fb7120;
+  border-color: #fb7120;
+}
+.btn-orange:focus {
+  background-color: #e25706;
+  border-color: #e25706;
+}
+
+.btn-orange-outline {
+  background-color: #ffffff;
+  color: #FB6107 !important;
+}
+.btn-default:not(.btn-sm), .btn-dark {
+    font-size: 17px;
+    font-weight: bold;
+    padding: 6px 20px;
+    border-radius: 4px !important;
+}
+.aqua-divider {
+  border: 2px solid #2AB7CA;
+  background-color: #2AB7CA;
+  opacity: 0.1;
+}
+.text-orange {
+  color: #FB6107 !important;
+}
+.border-orange {
+  border-color: #FB6107 !important;
+}
+.patient-card {
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  box-shadow: 0px 6px 4px rgba(43, 67, 80, 0.01);
+  padding: 20px;
+}
+.patient-card:hover {
+  border: 1px solid #2AB7CA;
+  transition: 0.4s;
+}
+.patient-card:hover img.default {
+  display: none;
+  transition: 0.4s;
+}
+.patient-card:hover img.focus {
+  display: block;
+  transition: 0.4s;
+}
+.patient-card h4 a{
+  font-family: 'Euclid';
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 24px;
+}
+.patient-card:hover h4 a {
+  color: #2AB7CA;
+  transition: 0.4s;
+}
+.patient-card p {
+  font-size: 15px;
+  line-height: 20px;
+  color: #636366;
+  margin-bottom: 0;
+}
+.first-video {
+  background: #FBFBFB;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  padding: 30px;
+}
+.flex {
+  display: flex;
+  margin-bottom: 20px;
+}
+.flex h4 {
+  margin-right: 50px;
+}
+.patient_info {
+  padding-top: 31px;
+  padding-bottom: 36px;
+}
+.patient_info_section {
+  margin-left: 40px;
+}
+.patient_info_section h3 {
+  font-family: 'Euclid';
+  font-weight: normal;
+  font-size: 34px;
+  letter-spacing: 0.64px;
+  margin-bottom: 0;
+}
+.patient_dob_coverage {
+  display: flex;
+  align-items: center;
+  margin-top: 29px;
+  font-family: 'Graphik';
+  font-size: 17px;
+  line-height: 22px;
+  letter-spacing: -0.408px;
+}
+.patient_dob_coverage > div:first-child {
+  margin-right: 70px;
+}
+.custom-container {
+  width: 35%;
+  margin-top: 35px;
+  margin-bottom: 53px;
+}
+.info_title {
+  font-family: 'Euclid-bold';
+  font-weight: bold;
+  font-size: 20px;
+  line-height: 24px;
+  letter-spacing: 0.68px;
+}
+.approved_info {
+  font-family: 'Euclid-bold';
+  font-style: normal;
+  color: #636366;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 26px;
+  letter-spacing: -0.24px;
+}
+
+.address-card {
+  background: #FFFFFF;
+  border: 2px solid rgba(0, 0, 0, 0.06);
+  box-sizing: border-box;
+  box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.03);
+  padding: 40px 50px;
+  margin-top: 20px;
+}
+.address-card .info_title {
+  margin-bottom: 34px;
+}
+.sub_context {
+  font-family: 'Euclid';
+  font-size: 18px;
+  line-height: 26px;
+  letter-spacing: -0.24px;
+  color: #636366;
+}
+.info_content {
+  padding-left: 85px;
+}
+#editMailingAddress input[type="text"] {
+  padding: 25px;
+}
+.breadcrumb {
+  padding: 0 10px;
+  background-color: #ffffff;
+}
+.pro_title {
+  width: 57%;
+}
+.pro_title .bg-tan {
+  margin-top: 20px;
+  background-color: #FDE1AF;
+}
+.pro_title .bg-tan p{
+  font-family: 'Graphik';
+  padding: 12px;
+  font-size: 13px;
+  margin-bottom: 0;
+  text-align: center;
+}
+.pro_flex {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+.btn-time {
+  font-size: 12px;
+  border-radius:0;
+}
+.btn-time.active:hover, .btn-time.active, .btn-time:focus {
+  background-color: #ECFDFF;
+  border: 1px solid #2AB7CA;
+}
+.btn-time:hover {
+  border: 1px solid #fcb148;
+  background-color: #FFF7EB;
+}
+.flex_name {
+  display: flex;
+  align-items: center;
+}
+.flex_name .info {
+  margin-left: 30px;
+}
+.flex_name p {
+  font-family: 'Graphik' !important;
+  font-size: 19px;
+  margin-top: -4px;
+}
+.flex_name h4 {
+  font-family: 'Euclid';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 41px;
+  margin-top: -5px;
+  padding: 0;
+}
+.addr {
+  width: 51%;
+}
+.addr_available {
+  margin-top: 25px;
+  display: flex;
+}
+.pro_subtitle {
+  display: flex;
+  align-items: flex-start;
+}
+.addr img, .avail img {
+  height: 20px;
+  margin-right: 5px;
+}
+.avail img {
+  margin-right: 15px;
+}
+.pro_subtitle h4{
+  font-family: 'Euclid';
+  font-weight: 500;
+  font-size: 17px;
+  line-height: 23px;
+}
+.addr p {
+  width: 80%;
+}
+.addr p, .avail p{
+  font-family: 'Graphik';
+  font-style: normal;
+  font-weight: normal;
+  font-size: 15px;
+  line-height: 20px;
+  margin-left: 25px;
+  margin-top: -5px;
+  margin-bottom: 0;
+}
+.avail p {
+  margin-left: 35px;
+}
+.pro_about {
+  margin-top: 20px;
+}
+.about_content p{
+  font-family: 'Graphik';
+  font-style: normal;
+  font-weight: normal;
+  font-size: 15px;
+  margin-bottom: 8px;
+  line-height: 135%;
+}
+.about_content small {
+  font-family: 'Euclid';
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 20px;
+}
+.covid_banner, .setup_today {
+  background-image: url('/img/covid-banner.jpg');
+  background-position: left center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  color: #fff;
+  padding: 34px 0;
+  margin-top: 35px;
+}
+.covid_banner p {
+  font-family: 'Euclid';
+  font-size: 18px;
+  line-height: 23px;
+}
+.covid_banner h4, .pro_program h4{
+  font-family: 'Euclid';
+  font-style: normal;
+  font-weight: normal;
+  font-size: 34px;
+  line-height: 42px;
+  width: 60%;
+}
+.pro_program {
+  margin-top: 75px;
+}
+.pro_program h4 {
+   width: 100%;
+}
+.program_light {
+  font-weight: 300;
+  font-size: 16px !important;
+}
+.pro_program p {
+  font-style: normal;
+  font-size: 19px;
+  width: 60%;
+}
+.program_subtitle {
+  font-weight: 800;
+  font-size: 22px !important;
+  line-height: 30px;
+  margin-top: 45px !important;
+}
+.custom-ul {
+  list-style: none;
+  margin-bottom: 35px;
+}
+.custom-ul li {
+  font-family: 'Graphik';
+  font-style: normal;
+  font-weight: normal;
+  font-size: 16px;
+  margin-bottom: 12px;
+  display: flex;
+}
+.custom-ul li::before {
+  content: url('/img/li.svg');
+  margin: 0 12px;
+  margin-top: 3px;
+}
+.kits {
+  margin-top: 50px;
+}
+.kits h4 {
+  font-family: 'Euclid';
+  font-size: 22px;
+  line-height: 30px;
+  margin-bottom: 35px;
+}
+.kit-container {
+  display: flex;
+  margin-bottom: 60px;
+}
+.kit-container img {
+  width: 160px;
+}
+.kit-info {
+  margin-left: 35px;
+}
+.kit-info h5 {
+  text-transform: uppercase;
+  font-family: 'Euclid-bold';
+  font-style: normal;
+  font-weight: bold;
+  font-size: 16px;
+  line-height: 23px;
+  margin-bottom: 5px;
+  letter-spacing: 2px;
+}
+.kit-info p {
+  font-family: 'Graphik';
+  font-style: normal;
+  font-weight: normal;
+  font-size: 15px;
+}
+.setup_today {
+  background-image: url('/img/setup-bg.jpg');
+  padding: 45px 0;
+}
+.setup_today h6 {
+  font-style: normal;
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 23px;
+}
+.setup_today h4 {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 35px;
+  line-height: 44px;
+  margin-top: 12px;
+}
+.setup_today p {
+  font-family: 'Graphik';
+  width: 60%;
+  font-weight: 500;
+  font-size: 14px;
+  margin-top: 15px;
+}
+.setup_today p.font-weight-bold {
+  font-size: 15px;
+}
+.setup_today .btn {
+  font-size: 16px;
+  margin-top: 20px;
+}
+@media screen and (max-width:1024px) {
+  .custom-container {
+    width: 50%;
+  }
+  .device-block {
+    max-width: 24%;
+  }
+  .flex-patient > div {
+      width: 31%;
+  }
+  .covid_banner h4, .pro_program h4, .pro_program p, .setup_today p {
+    width: 100%;
+  }
+}
+@media screen and (max-width:991px) {
+  .pristine-block {
+    flex-wrap: wrap;
+  }
+  .device-block {
+    margin-bottom: 10px;
+    max-width: 32%;
+  }
+  .pro_flex {
+    display: block;
+  }
+  .pro_title {
+    width: 100%;
+    margin-bottom: 20px;
+  }
+  .contact {
+    display: flex !important;
+    flex-direction: column;
+  }
+  .contact > div {
+    margin-bottom: 0 !important;
+  }
+  .contact >div:first-child {
+    order:1;
+  }
+}
+@media screen and (max-width:768px){
+  .pristine-picture {
+    min-width: 50px;
+    min-height: 50px;
+    width: 120px;
+    height: 120px;
+    border-radius: 100%;
+    overflow: hidden;
+  }
+  .web {
+    display: none;
+  }
+  .custom-container {
+    width: 70%;
+  }
+  .link {
+    margin-right: 5px;
+  }
+  .flex-patient {
+    justify-content: space-between;
+  }
+  .flex-patient > div {
+      width: 48.5%;
+      margin-right: 0;
+  }
+}
+@media all and (max-width: 767px) {
+  .patient_info {
+    display: block;
+  }
+  .heading-icon {
+      width: 60px;
+      height: 60px;
+  }
+  .device-block {
+    max-width: 48%;
+  }
+  .flex-patient > div {
+      width: 100%;
+  }
+  .info_content {
+    padding-left: 20px;
+    margin-top: 20px;
+  }
+  .kit-container {
+    display: block;
+  }
+  .kit-info {
+    margin-top: 10px;
+    margin-left: 0;
+  }
+}
+@media screen and (max-width:500px) {
+  #patientDashboardApp .lh-form-container {
+    padding: 0 10px;
+  }
+  .custom-container {
+    width: 100%;
+  }
+  .top-covid.dashboard h6{
+    padding-bottom: 0px;
+    margin-top: 10px;
+  }
+  .top-covid h6{
+    padding-bottom: 30px;
+  }
+  .profile-pic {
+    width: 80px;
+    height: 80px;
+  }
+  .setup p {
+    font-size: 25px;
+    line-height: normal;
+  }
+  .btn-orange {
+    padding: 6px 15px;
+  }
+  .device-title {
+    padding: 10px;
+  }
+  .address-card {
+    padding: 30px;
+  }
+  .mobile, .patient_dob_coverage {
+    display: block;
+  }
+  .patient_info_section {
+    margin-left: 20px;
+  }
+  .form {
+    padding: 60px 20px 20px 20px !important;
+  }
+  .link span:first-child {
+    padding-right: 65px;
+  }
+  .link .icon_wrap {
+    right: -5px !important;
+  }
+  .flex {
+    flex-wrap: wrap;
+  }
+  .flex h4 {
+    margin-right: 0px;
+    margin-bottom: 12px;
+  }
+  .step-image, .icon-button img {
+    height: 50px;
+  }
+  .patient_info {
+    padding-top: 0;
+  }
+  .patient_info a > img {
+    display: none;
+  }
+  .full-mobile {
+    margin-right: -15px;
+    margin-left: -15px;
+  }
+  .addr {
+    width: 70%;
+  }
+  .flex_name, .profile-pic {
+    flex-direction: column;
+    text-align: center;
+  }
+  .flex_name .info {
+    margin-left: 0;
+  }
+  .kit-container >div:first-child, .kit-info h5 {
+    text-align: center;
+  }
+  .kit-info h5 {
+    padding: 10px 0;
+  }
+  .pro_subtitle h4 {
+    font-size: 18px;
+    line-height: 23px;
+    margin-bottom: 10px;
+  }
+  .addr p, .avail p {
+    font-size: 14px;
+  }
+  .setup_today .btn {
+    width: 100%;
+  }
+}
+@media screen and (max-width:375px) {
+  .link {
+    margin-right: 0;
+  }
+  .link span:first-child {
+    padding-right: 12px;
+    margin-right: 0px;
+  }
+  .link .icon_wrap {
+    display: none;
+  }
+}
+@media screen and (max-width:330px) {
+  .main-nav {
+    flex-wrap: nowrap !important;
+  }
+  .enroll {
+    font-size: 30px;
+  }
+  .device-block {
+    max-width: 100%;
+  }
+  .patient-device .device-block {
+    max-width: 48%;
+  }
+  .call-light a{
+    font-size: 24px;
+  }
+  .logo {
+    width: 90%;
+  }
+  .flex-info .partial-text {
+    margin-right: 5px;
+  }
+  .flex-info .partial-text+img{
+    height: 40px;
+  }
+  .flex-footer img {
+    margin-right: -80px;
+  }
+}
+.heading-icon {
+    width: 100px;
+    height: 100px;
+}
+.step-point-outer {
+    width: 60px;
+    margin-right: 25px;
+}
+.step-point {
+    border: 1px solid rgba(0, 0, 0, 0.06);
+    padding: 16px 28px;
+}
+.icon-button {
+    display: inline-flex;
+    align-items: center;
+    box-shadow: 0px 100px 80px rgba(190, 190, 190, 0.07), 0px 41.7776px 33.4221px rgba(190, 190, 190, 0.0503198), 0px 22.3363px 17.869px rgba(190, 190, 190, 0.0417275), 0px 12.5216px 10.0172px rgba(190, 190, 190, 0.035), 0px 6.6501px 5.32008px rgba(190, 190, 190, 0.0282725), 0px 2.76726px 2.21381px rgba(190, 190, 190, 0.0196802);
+    border-radius: 5px;
+    padding: 20px 28px;
+    font-weight: bold;
+    cursor: pointer;
+}
+.icon-button span {
+  font-family: 'Ivar';
+  font-size: 20px;
+  line-height: 24px;
+  letter-spacing: 0.68px;
+  font-weight: lighter;
+}
+.partial-text {
+    margin-right: -1rem !important;
+}
+.partial-text+img {
+    background: #fff;
+    border-radius: 100%;
+    border: 1px solid #fff3;
+}
+.self-monitoring-header {
+  background: #ffefe6;
+  min-height: 120px;
+}
+.self-monitoring-header h2 {
+  font-size: 21px !important;
+  line-height: 32px !important;
+}
+.self-monitoring-header img {
+  width: 50px;
+  height: 50px;
+  border-radius: 100%;
+  margin-bottom: 1.5rem;
+}
+@media screen and (min-width: 991px){
+  .self-monitoring-header h2 {
+    font-size: 25px !important;
+    line-height: 32px !important;
+  }
+  .self-monitoring-header img {
+    width: 75px;
+    height: 75px;
+    margin-bottom: 0;
+  }
+}

public/css/style.css

@@ -1,335 +1,1132 @@
 html {
   scroll-behavior: smooth;
 }
+@font-face {
+  font-family: 'Dash';
+  src: url('dash/DashiellText-Medium.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Euclid';
+  src: url('euclid/EuclidCircularA-Regular.woff');
+}
+@font-face {
+  font-family: 'Euclid-bold';
+  src: url('euclid/EuclidCircularA-Medium.woff');
+}
+* {
+    margin: 0;
+    padding: 0;
+    font-family: 'Euclid';
+}
+b, strong, .font-bold, .bolder, .font-bolder, .font-weight-bold {
+  font-family: 'Euclid-bold';
+}
+.dash {
+  font-family: 'Dash' !important;
+}
+.konnect {
+  font-family: 'Euclid';
+}
 body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   width: 100%;
-}
-a:hover {
-  text-decoration: none;
+  font-family: 'Euclid';
 }
 footer {
   margin-top: auto;
 }
-[v-cloak] {
-  display: none !important;
+textarea {
+  resize: none;
 }
-.form-control {
-  font-weight: 600 !important;
+a:hover {
+  text-decoration: none;
 }
-.footer {
-  margin-left: 200px;
+:root {
+  --pry-color: #2AB7CA;
+  --pry-dark-color: #08415C;
+  --sec-color: #FDE1AF;
 }
-.w-80 {
-  width: 80%;
+::-moz-selection { background: var(--pry-color); color: #fff; }
+::selection { background: var(--pry-color); color: #fff; }
+
+nav.navbar {
+  width: 100%;
+  border-bottom: 1px solid #eee;
+  background-color: #fff;
+  z-index: 100;
+  padding: 0;
+  height: 70px;
 }
-.btn-primary {
-  background-color: #2AB7CA;
-  border-color: #2AB7CA;
+nav .container {
+  height: 60px;
 }
-.text-blue {
-  color: #08415C;
+.navbar-nav {
+  margin-left: 240px;
+  margin-bottom: 0;
 }
-.sidenav {
-  height: 100%;
-  width: 250px;
-  position: fixed;
-  z-index: 1;
-  top: 66px;
-  left: 0;
-  background-color: #eee;
-  overflow-x: hidden;
-  padding-top: 10px;
-  padding-bottom: 100px;
+.navbar-nav li{
+  display: inline;
+  padding-left: 10px;
+  font-size: 15px;
 }
-.navbar {
-  z-index: 100;
+#navBarWeb li {
+  padding-right: 20px;
+  padding-left: 0;
+  font-size: 17px;
+  font-weight: 400;
 }
-.navbar-toggler {
+.navbar-nav li a {
+  color: #000000;
+  font-weight: 500;
+  border-bottom:1px solid rgba(0,0,0,0);
+  transition: 0.5s;
+}
+.navbar-nav li a:hover {
+  color: var(--pry-color);
+  border-bottom:1px solid var(--pry-color);
+  transition: 0.5s;
+}
+.nav-item a {
   color: var(--pry-dark-color);
-  border:1px solid var(--pry-dark-color);
-  background-color: #fff;
-  padding: 12px;
-  margin-bottom: 0;
-  margin-right: 12px;
 }
-.navbar-toggler:hover {
-  background-color: var(--pry-color);
-  color: #fff;
+.nav-item a:hover {
+  color: var(--pry-color);
 }
-.nav-link {
-  padding: 10px;
+
+.font-bold {
+  font-weight: 500;
 }
-.nav-link{
-  display: block;
-  padding: 10px 0 10px 45px;
-  font-weight: 300;
-  border-bottom: 1px solid #ddd;
-  color: #999;
+
+.font-bolder {
+  font-weight: 600;
+}
+.dropdown-menu {
+  margin-top: 15px;
+  border-radius: 0;
+  padding: 0;
+}
+.dropdown-item {
+  padding: 14px;
+  padding-right: 32px;
+  font-size: 14px;
+}
+.dropdown-item:not(:last-child) {
+  border-bottom:1px solid #eee;
 }
 
-.nav-link:hover {
-  text-decoration: none;
-  color: #000;
+.btn-orange, .btn-orange-outline {
+    font-weight: bold;
+    background-color: #FB6107;
+    color: #fff !important;
+    padding: 6px 20px;
+    border-radius: 4px !important;
+    border: 1px solid #FB6107;
+    text-transform: uppercase;
 }
-.nav-link.active, .nav-link.completed {
-  color: #000 !important;
-  font-weight: 500;
+
+.top {
+  background-image: url('../img/top.jpg');
+  background-position: center top;
+  background-size: cover;
+  background-repeat: no-repeat;
 }
-.nav-link.completed {
-  padding-left: 20px;
+.programs {
+  background-image: url('../img/programs.jpg');
+  background-position: center;
 }
-.nav-link.completed::before {
-  font-family: "Font Awesome 5 Free";
-  font-weight: 900;
-  content: "\f058";
-  padding-right: 5px;
-  color: #17a2b8;
+.about {
+  background-image: url('../img/about.png');
+  background-position: center;
 }
-.main {
-  margin-left: 250px;
-  margin-top: 60px;
+.health-plans {
+  background-image: url('../img/health-plans.jpg');
+  background-position: center;
+}
+.providers {
+  background-image: url('../img/providers.jpg');
+  background-position: center;
+}
+.employers {
+  background-image: url('../img/employers.jpg');
+  background-position: center;
 }
-.file {
+.hiring {
+  background-image: url('../img/hiring.jpg');
+  background-position: center;
+}
+.family {
+  background-image: url('../img/family-bg.jpg');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+.family {
+  display: flex;
+  padding: 80px;
   position: relative;
-  overflow: hidden;
-  cursor: pointer;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+.plq {
+  flex-basis: 20%;
+  margin-right: 10px;
+  background-color: #D0C78E;
+  padding: 10px;
+  text-align: center;
+  margin-top: 60px;
 }
-.input-file {
+.plq img {
+  width: 100%;
+}
+.plq p {
+  font-size: 14px !important;
+  font-weight: bold;
+  margin-bottom: 2px !important;
+}
+
+.initiative {
+  flex-basis: 75%;
+}
+.initiative p {
+  font-size: 17px !important;
+  font-weight: lighter;
+}
+.bolder {
+  font-weight: 600;
+}
+.flower1 {
   position: absolute;
-  font-size: 50px;
-  opacity: 0;
+  top:0;
+  left:0;
+}
+.flower2 {
+  position: absolute;
+  top:0;
   right: 0;
-  top: 0;
-  cursor: pointer;
 }
-
-video {
-  background: #222;
-  margin: 0 0 20px 0;
-  --width: 100%;
-  width: var(--width);
-  height: 300px;
+.flower3 {
+  position: absolute;
+  bottom:0;
+  right: 10%;
 }
-
-.hidden {
-  display: none;
+.overlay {
+  background:rgba(21, 65, 89, 0.7);
+  width: 100%;
 }
-.blue-card {
-  background-color: #EAFCFF;
+.top h4 {
+  font-size: 46px;
+  font-weight: 500;
 }
-.g-recaptcha {
-  max-width: 100%;
+.top h5 {
+  font-size: 34px;
+  font-weight: 600;
 }
-.welcome-container .title {
-  font-style: normal;
-  font-weight: bold;
-  font-size: 60px;
-  line-height: 77px;
-  color: #000000;
+.top p {
+  font-size: 20px;
+  margin-top: 20px;
 }
-.welcome-container p, .welcome-container label, .welcome-container ul{
-  color: #6E7884;
-  font-style: normal;
-  font-size: 15px;
-  line-height: 29px;
+.bg-light-white {
+  background-color: rgba(255,255,255,0.9);
 }
-.welcome-container h2 {
-  font-weight: bold;
-  font-size: 43px;
-  line-height: 57px;
-  color: #071232;
+.call, .call-light {
+  padding: 10px 20px;
+  border: 1px solid var(--pry-color);
+  width: fit-content;
+}
+.call-light {
+  border-color:#fff;
+}
+.call a, .call-light a{
+  font-size: 30px;
+  color: var(--pry-color);
+  font-weight: 700;
+}
+.call-light a {
+  color: #fff;
+}
+.call:hover {
+  border-color: var(--pry-color);
 }
-.flex-content {
+.announcement {
+  display: flex;
+  margin-top: 50px;
+}
+.special {
+  text-transform: uppercase;
+  background-color: #154159;
+  flex-basis: 40%;
+}
+.special img {
+  width: 100%;
+  height: 220px;
+}
+.special h4{
+  font-size: 18px;
+  color: #fff;
+  font-weight: 400;
+  text-align: center;
+  margin: 20px 0;
+}
+.special-content {
+  flex-basis: 60%;
+  padding: 0 10px;
+  background-color:var(--sec-color);
+}
+.about-home {
+  padding: 80px 0;
+}
+.about-home img, .hope img {
+  width: 100%;
+}
+p {
+  font-size: 18px;
+}
+.content p {
+  font-size: 16px;
+  margin-bottom: 12px;
+}
+.med-container {
+  text-align: center;
+}
+.med-container span {
+  font-size: 20px;
+  margin:10px;
+}
+.header-divider, .pry-header {
+  border:2px solid var(--sec-color);
+  background: var(--sec-color);
+  width: 50px;
+  margin: 10px 0;
+}
+.flex-center {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.flex-content img {
+.flex-center >div {
+  width: 50%;
+  padding: 0 10px;
+}
+.flex-center img {
   width: 100%;
 }
-.flex-content >div {
-  flex-basis: 44%;
+.flex-card {
+  display: flex;
+}
+.flex-card > div{
+  width: 45%;
+  margin: 0 14px;
+}
+.img-card {
+  box-shadow: 0px 9px 34px rgba(140, 140, 140, 0.05), 0px 3.75998px 14.2044px rgba(140, 140, 140, 0.0462623), 0px 2.01027px 7.59435px rgba(140, 140, 140, 0.0410492), 0px 1.12694px 4.25733px rgba(140, 140, 140, 0.0347863), 0px 0.598509px 2.26103px rgba(140, 140, 140, 0.0272543), 0px 0.249053px 0.940867px rgba(140, 140, 140, 0.0176014);
+}
+.img-card p{
+  font-size: 16px;
+}
+.pry-header {
+  border-color: var(--pry-dark-color);
+  background: var(--pry-dark-color);
+}
+.btn-pry, .blue-card, .btn-pry-light {
+  background-color: var(--pry-color);
+  color: #fff;
+  border-radius: 0;
+  font-size: 18px;
+  font-weight: 500;
 }
-.bg-light-sec {
-  background-color: #FEF9F3;
+
+.btn-pry-light, .btn-pry:hover {
+  background-color: var(--pry-dark-color);
+  border: 1px solid var(--pry-dark-color);
+  color: #fff;
 }
-.why-us {
-  padding: 50px 20px;
+.blue-card:hover {
+  background-color: var(--pry-dark-color);
+  color: #fff;
 }
-.why-us h5 {
-  color: #FF9532;
+.btn-pry-light {
+  border: 1px solid #fff;
 }
-.why-us p {
-  padding: 20px 100px;
+.nav-item > .btn-pry {
+  font-size: 15px;
+  padding: 12px 24px;
+  color: #fff;
 }
-.support {
+.flex-row {
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
-  max-width: 1800px;
-  margin: auto;
 }
-.support >div {
-  flex-basis: 50%;
+.flex-row > div {
+  width: 32%;
 }
-.support  p {
-  margin: 0;
+.white-card {
+  padding: 30px;
+  background-color: #ffffff;
+  box-shadow: 0px 100px 80px rgba(140, 140, 140, 0.07), 0px 22.9642px 35.891px rgba(140, 140, 140, 0.0285813), 0px 6.94824px 20.3502px rgba(140, 140, 140, 0.0210064), 0px 0.681338px 12.0279px rgba(140, 140, 140, 0.0187784), 0px -1.38408px 6.74154px rgba(140, 140, 140, 0.0179796), 0px -1.28279px 2.96746px rgba(140, 140, 140, 0.0155585);
 }
-.support-content > div{
-  padding: 50px 30px 50px 30%;
+.white-card-link {
+  padding: 0;
+  margin-top: 15px;
+  background-color: #ffffff;
+  position: relative;
+  font-size: 12px;
 }
-.support-img {
-  margin-right: 50px;
+.white-card-link img {
+  width: 100%;
+  opacity: 0.9;
 }
-.support-img img {
-  background: #FFFFFF;
-  box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.06);
-  border-radius: 20px;
-  padding: 10px;
-  height: 60px;
+.white-card-link a{
+  display: block;
+  transition: 0.4s;
+  color: var(--pry-color);
 }
-.support-ways {
-  position: relative;
+.white-card-link a:hover {
+  color: var(--pry-dark-color);
+}
+.white-card-link:hover {
+  transition: 0.4;
+  box-shadow: 0px 100px 80px rgba(140, 140, 140, 0.07), 0px 22.9642px 35.891px rgba(140, 140, 140, 0.0285813), 0px 6.94824px 20.3502px rgba(140, 140, 140, 0.0210064), 0px 0.681338px 12.0279px rgba(140, 140, 140, 0.0187784), 0px -1.38408px 6.74154px rgba(140, 140, 140, 0.0179796), 0px -1.28279px 2.96746px rgba(140, 140, 140, 0.0155585);
+}
+.white-card p {
+  margin-bottom: 13px;
+}
+.green-card {
+  border-left:6px solid var(--sec-color);
+  border-right:3px solid var(--pry-color);
   display: flex;
-  justify-content: flex-end;
-  align-items: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+  width: 100%;
+  background-color: #F1F2F2;
+  transition: 0.3s;
+  color: var(--pry-color);
 }
-.dark-card {
-  background-color: #163042;
-  color: #EAFCFF;
-  padding: 20px 20px 400px 50px;
-  width: 70%;
-  image-rendering: pixelated;
+.program {
+  background-color: #CCF0F5;
+  box-shadow: 0px 100px 80px rgba(140, 140, 140, 0.07), 0px 22.9642px 35.891px rgba(140, 140, 140, 0.0285813), 0px 6.94824px 20.3502px rgba(140, 140, 140, 0.0210064), 0px 0.681338px 12.0279px rgba(140, 140, 140, 0.0187784), 0px -1.38408px 6.74154px rgba(140, 140, 140, 0.0179796), 0px -1.28279px 2.96746px rgba(140, 140, 140, 0.0155585);
 }
-.dark-card h3 {
-  font-weight: 600;
-  font-size: 64px;
-  line-height: 76px;
-  margin-right: 30px;
+.pry-card {
+  background-color: var(--pry-color);
+  color: #fff;
+}
+.green-card:hover, .sec-card {
+  background-color: var(--sec-color);
+  transition: 0.3s;
 }
-.rain{
-  opacity: 0.1;
+.outreach-container {
+  display: flex;
+  flex-wrap: wrap;
   margin-top: 20px;
 }
-.single {
+.outreach-container div {
+  margin-right: 20px;
+  margin-bottom: 20px;
+  width: 250px;
+  padding: 10px;
+  cursor: pointer;
+}
+.outreach-container p {
+  font-size: 17px;
+  font-weight: 700;
+  letter-spacing: 1.1px;
+}
+.outreach-container img {
+  width: 50px;
+  margin-right: 10px;
+}
+.flex-container {
+  display: flex;
+  align-items: center;
+}
+.flex-container div {
+  flex-basis: 60%;
+}
+.flex-container .size-4 {
+  flex-basis: 35%;
+  margin-right: 12px;
+}
+.text-pry {
+  color: var(--pry-color);
+}
+.text-dark-pry {
+  color: var(--pry-dark-color);
+}
+.bg-green {
+  background-color: #FEF0D7;
+}
+.history div:first-child {
+  width: 40%;
+}
+.history div:last-child {
+  width: 60%;
+}
+.topography {
+  position: absolute;
+  top:0;
+  width: 15%;
+}
+
+.btn-dark-pry {
+  color: var(--pry-dark-color);
+  background:none;
+  border-color: var(--pry-dark-color);
+}
+.btn-dark-pry:hover {
+  background-color: var(--pry-dark-color);
+  color: #fff;
+}
+.bg-grey{
+  background-color: #F1F2F2;
+}
+.bg-light-blue{
+  background-color: #CCF0F5;
+}
+.bg-light-grey{
+  background-color: #F1F4F4;
+}
+.bg-sec{
+  background-color: var(--sec-color);
+}
+.steps {
+  background-color: var(--sec-color);
+  border-bottom: 2px solid var(--pry-color);
+  position: relative;
+}
+.title {
+  font-weight: 500;
+  font-size: 30px;
+}
+.popper {
+  cursor: pointer;
+}
+.popover {
+  padding: 12px;
+}
+.popover h6 {
+  font-size: 18px;
+}
+/* .steps-container {
+  display: none;
+} */
+
+.steps-content {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.steps-content .content {
+  flex-basis: 45%;
+  background-color: #ffffff;
+  border-left:2px solid var(--pry-color);
+  padding: 20px;
+  margin-right: 20px;
+  margin-bottom: 20px;
+  font-size: 18px;
+}
+.plus {
+  width: 100%;
+  text-align: center;
   position: absolute;
-  right:0;
+  bottom:-20px;
+  left:0;
+}
+.list {
+  list-style:none;
+  padding: 0;
+  margin-left: 0 !important;
+}
+.list li, ol li {
+  font-size: 17px;
+}
+.list li {
+  display: flex;
+}
+.list li::before{
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  content: "\f105";
+  font-size: 18px;
+  margin-left: 10px;
+  padding-right: 10px !important;
+  color:var(--pry-color);
+  border-radius: 100%;
+}
+.plus a::before{
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  content: "\f055";
+  font-size: 25px;
+  color:var(--pry-dark-color);
+  background-color: #ffffff;
+  border-radius: 100%;
+}
+.minus a::before{
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  content: "\f056";
+  font-size: 25px;
+  color:var(--pry-dark-color);
+  background-color: #ffffff;
+  border-radius: 100%;
+}
+.lifeline {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.lifeline p{
+  width: 50%;
+  margin-bottom: 10px;
+  font-weight: 700;
+}
+.lifeline img{
+  width: 25%;
+}
+.role-container {
+  display: flex;
+}
+.role-container .content {
+  width: 50%;
+  background-color: #ffffff;
+  padding: 15px;
+  border: 2px solid #fff;
+  margin-right: 10px;
+}
+.role-container .content p {
+  margin-bottom: 12px;
+  font-size: 18px;
+}
+.role-container .content h5 {
+  letter-spacing: 1.1px;
+  font-size: 17px;
+  font-weight: bold;
+  color: var(--pry-color);
+}
+.role-container .content:hover {
+  border: 2px solid var(--pry-color);
+  cursor: pointer;
+}
+.family-fund img {
+  width: 100%;
+}
+.affiliates {
+  text-align: center;
+}
+.affiliates img {
+  max-height: 40px;
+  filter: grayscale(1);
+  margin: 0 10px;
+}
+.contact {
+  display: flex;
+  justify-content: space-between;
+}
+.contact > div {
+  width: 48%;
+  padding: 20px;
 }
-.stetho {
+.contact .phone {
+  background-color: var(--pry-dark-color);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #fff;
+  position: relative;
+}
+.phone img {
   position: absolute;
-  bottom:230px;
-  right:310px;
+  left:0;
+  bottom:0;
+  width: 40px;
+}
+.links ul li{
+  display: inline;
+  margin-right: 20px;
+  font-size: 20px;
+  text-transform: uppercase;
+  font-weight: 500;
+}
+.social {
+  display: flex;
+  margin-top: 30px;
+}
+.social a {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  font-size: 25px;
+  border: 1.5px solid var(--pry-color);
+  color: var(--pry-color);
+  margin-right: 10px;
+}
+.social a:hover {
+  background-color: var(--pry-color);
+  color: #fff;
+}
+.partners {
+  text-align: right;
+}
+.partners p, .partners p a{
+  font-size: 15px;
+  font-weight: 500;
+  margin-bottom: 12px;
+  color: var(--pry-color);
+}
+.partners p a:hover {
+  color: var(--pry-dark-color);
+}
+footer {
+  background-color: #163043;
 }
-.group {
+.flex-footer {
+  display: flex;
+}
+@media all and (min-width: 768px) {
+    .flex-footer > div {
+        margin-right: 100px;
+    }
+}
+footer ul {
+  list-style: none;
+}
+footer a {
+  color: #fff;
+  font-weight: 300;
+}
+footer a:hover {
+  color: #fff;
+  text-decoration: underline;
+}
+.content-flex {
+  display: flex;
+}
+.content-flex .sidebar {
+  flex-basis: 25%;
+  border-right: 1px solid #ddd;
+}
+.content-flex .content {
+  flex-basis: 75%;
+}
+.img-overlay {
+  background:rgb(21, 65, 89);
+}
+.img-overlay img{
+  width: 100%;
+  opacity: 0.6;
+}
+.search-image {
+  position: relative;
+  max-width: 100px;
+}
+.search-image i {
   position: absolute;
-  right:0;
-  bottom:10px;
+  bottom:0;
+  left:65%;
 }
-@media screen and (max-width:1414px) {
-  .support-ways {
+.grey-pill {
+  background-color: #EDEEF2;
+  color: var(--pry-color);
+  border-radius: 100px;
+  padding: 1px;
+  width: 31%;
+  padding: 6px 20px;
+  font-size: 16px;
+  margin-right:10px;
+  margin-bottom:10px;
+}
+.mobile {
+  display: none;
+}
+@media screen and (max-width:991px) {
+  .announcement {
+    display: block;
+  }
+  .special h4 {
+    padding: 10px 0;
+    margin-bottom: 0;
+  }
+  .special img {
     display: none;
   }
-  .support > div {
-    flex-basis: 100%;
+  .special-content {
+    padding: 10px;
   }
-  .support-content > div {
-    padding: 50px;
+  .special-content p {
+    margin: 0;
   }
-}
-@media screen and (max-width:1024px) {
-  .table-container {
-    overflow-x: scroll;
+  .title {
+    font-size: 25px;
   }
-  .w-50, .w-80 {
-    width: 100% !important;
-    overflow-x: scroll;
+  .outreach-container div, .blue-card {
+    max-width: 100%;
+    width:100%;
+    margin-right: 0;
   }
-}
-@media screen and (max-width:991px) {
-  .sidenav {
-    width: 200px;
-    height: 100%;
+  .flex-container .size-4 {
+    flex-basis: 40%;
+  }
+  .contact  {
+    display: block;
+  }
+  .contact > div {
+    width: 100%;
+    margin-bottom: 20px;
+  }
+  .footer, .social{
+    justify-content: center;
+    text-align: center;
+  }
+  .partners {
+    margin-top: 20px;
+    text-align: center;
+  }
+  .role-container {
+    flex-wrap: wrap;
+  }
+  .role-container .content {
+    width: 100%;
+    margin-bottom: 20px;
+  }
+  .lifeline p {
+    width: 40%;
+  }
+  .btn-pry, .blue-card, .btn-pry-light {
+    font-size: 16px;
+  }
+  #navBar {
     position: absolute;
+    width: 100%;
+    background-color: #ffffff;
+    top: 64px;
+    right: 0;
+    padding: 0;
+    border-top: 1px solid #eee;
+    box-shadow: 0 10px 10px #ccc;
   }
-  .footer {
+  #navBar.dashboard-nav {
+    top:64px;
+  }
+  .navbar-nav {
     margin-left: 0;
   }
-  .main {
-    margin-left: 200px;
+  .navbar-nav li{
+    display: block;
+  }
+  .nav-item {
+    border-bottom: 1px solid #eee;
+  }
+  .nav-links {
+    position: absolute;
+    right: 60px;
+    top:18px;
+  }
+  .nav-links ul{
+    list-style: none;
   }
-  .nav-link{
+  .nav-links ul li{
+    display: inline-block;
+    margin-right: 10px;
+  }
+  .logo {
+    width: 100%;
+  }
+  .navbar-toggler {
+    color: var(--pry-dark-color);
+    border:1px solid var(--pry-dark-color);
+    background-color: #fff;
+    padding: 12px;
+    margin-bottom: 0;
+    margin-right: 12px;
+  }
+  .navbar-toggler:hover {
+    background-color: var(--pry-color);
+    color: #fff;
+  }
+  nav {
+    padding: 0 10px;
+  }
+  .flex-row > div {
+    width: 48.5%;
+  }
+  .web, .navBarWeb{
+    display: none !important;
+  }
+
+  .mobile, .family{
     display: block;
-    padding: 10px 0 10px 35px;
   }
-  .nav-link.completed {
-    padding-left: 10px;
+  .plq {
+    width: 50%;
+    margin: 20px 0;
+  }
+  .plq p {
+    font-size: 16px !important;
   }
-  .flex-content {
+  .flex-footer, .flex-card{
     flex-wrap: wrap;
+    justify-content: center;
   }
-}
-@media screen and (min-width:650px) {
-  #navbarNavDropdown {
-    display: none !important;
+  .flex-card > div:not(:last-child){
+    margin-bottom: 30px;
+  }
+  .flex-footer > div{
+    width: 35%;
+    margin-bottom: 20px;
+  }
+  .flex-footer .text-center{
+    text-align: left !important;
   }
 }
-@media screen and (max-width:600px) {
-  #navbarNavDropdown {
-    position: absolute;
-    top: 60px;
-    background: #fff;
-    z-index: 100;
-    left: 0px;
+
+@media screen and (max-width:767px) {
+  .flex-container, .content-flex {
+    display: block;
   }
-  .sidenav {
+  .img-overlay, .sidebar h4 {
     display: none;
   }
-  .flex-content >div {
+  .content-flex .sidebar {
+    padding-top: 20px;
+    border:none;
+  }
+  .content-flex .content {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+  .flex-container .size-4 {
+    margin-bottom: 20px;
+  }
+  .steps-container .content {
     flex-basis: 100%;
+    margin-right: 0;
   }
-  .bottom {
-    order: 1;
-    margin-top: 15px;
+  .lifeline {
+    display: block;
+    text-align: center;
   }
-  .main {
-    margin-left: 0;
+  .lifeline p {
+    width: 100%;
   }
-  .navbar-toggler {
-    display: inline;
+  .content .pl-4 {
+    padding-left: 0 !important;
   }
-  .welcome-container .title {
-    font-style: normal;
-  font-weight: bold;
-  font-size: 50px;
-  line-height: 57px !important;
-  color: #000000;
+  .grey-pill {
+    width: 100%;
+  }
+  .family {
+    padding: 100px 40px;
+  }
+}
+@media screen and (max-width:525px) {
+  .logo {
+    margin-left: 10px;
+  }
+  .flex-row > div {
+    width: 100%;
+  }
+  .flower2 {
+    width: 25%;
+  }
+  .plq {
+    width: 100%;
+  }
+  .nav-links {
+    display: none;
+  }
+  .top .p-5 {
+    padding: 20px !important;
+  }
+  .flex-center {
+    flex-wrap: wrap;
+  }
+  .flex-center > .ml-5{
+    margin-left: 0 !important;
+  }
+  .ord-1 {
+    order: 1;
   }
-  .why-us p{
-    padding: 00px;
+  .ord-2 {
+    order: 2;
   }
-  .support-content >div {
-    padding: 50px 20px;
+  .img-card > .d-flex img {
+    display: none;
   }
-  .support-img {
-    margin-right: 30px;
+  .flex-footer > div, .flex-card > div, .flex-center > div{
+    width: 100%;
+    margin-bottom: 20px;
   }
 }
-@media screen and (max-width:500px) {
-  .welcome-container .title {
-    font-size: 40px;
+
+@media (min-width: 1300px) {
+  .wide-container {
+    max-width: 1300px;
   }
-  .support-content >div {
-    display: block !important;
-    text-align: center;
-    padding: 30px;
+}
+.sticky-header {
+    position: sticky;
+    top: 0;
+    margin-top: -1px;
+    border-top: 0 !important;;
+}
+
+
+.calendar {
+  width: 380px;
+}
+.calendar .bg-aqua {
+  color: #fff;
+  padding: 29px;
+}
+.calendar .bg-aqua h4 {
+  font-family: 'Euclid';
+  font-weight: 600;
+  font-size: 22px;
+  line-height: 26px;
+}
+.calendar .bg-aqua p {
+  margin-top: 15px;
+  font-weight: 600;
+  font-size: 17px;
+  margin-bottom: 0;
+}
+.calendar .doc {
+  border-bottom: 2px solid #fff;
+  padding-bottom: 3px;
+}
+.table-container {
+  overflow-y: scroll;
+  overflow-x: hidden;
+  max-height: 320px;
+}
+.calendar table {
+  /*table-layout: fixed;*/
+}
+.calendar table th, .calendar table td{
+  border-color: #C1D5E5 !important;
+  white-space: nowrap;
+  text-align: center;
+  padding: 0 !important;
+}
+.calendar table tr:last-child td {
+  padding-bottom: 8px !important;
+}
+.calendar table td .slot {
+  display: inline-block;
+  margin-top: 8px;
+  border: 1px solid #2ab7ca;
+  height: 24px;
+  line-height: 24px;
+  padding: 0 4px;
+  border-radius: 3px;
+}
+.calendar table th {
+  font-family: 'Graphik';
+  font-weight: bolder;
+  font-size: 12px;
+  padding: 6px 0;
+  color: #08415C;
+  border-left: 0 !important;
+  border-right: 0 !important;
+}
+.calendar table td {
+  padding: 5px 0;
+  text-align: center;
+  border-left: 0 !important;
+  border-top: 0 !important;
+  border-bottom: 0 !important;
+  border-right: 0 !important;
+}
+.calendar .book {
+  text-align: center;
+  border: 1px solid #C1D5E5;
+  padding: 25px;
+}
+.calendar-nav {
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding: 0.5rem;
+  background-color: #2AB7CA !important;
+}
+.calendar-nav a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 30px;
+  width: 30px;
+}
+@media screen and (max-width:991px) {
+  .calendar {
+    width: 100%;
   }
-  .support-img {
-    margin-right: 0px;
-    margin-bottom: 30px;
+}
+@media screen and (max-width:500px) {
+  .calendar {
+    max-width: calc(100vw - 30px);
+  }
+  .calendar .book {
+    padding: 20px;
   }
 }
-.w-100px {
-  width: 100px;
+.slot-td {
+    cursor: pointer;
+    font-size: 13px;
+    padding: 0 !important;
+    vertical-align: bottom !important;
+    padding-bottom: 4px !important;
+}
+.slot-td .slot:hover {
+    background: aliceblue;
+}
+.slot-td.selected .slot {
+    background: #2ab7ca;
+    color: #fff;
+}
+.devices-list {
+    list-style-position: inside;
+}
+.devices-list img {
+    max-width: 90px;
+    margin-right: 0.75rem;
+    border-radius: 4px;
+}
+ul.dashboard-list {
+  /*list-style-position: inside;*/
+}
+ul.dashboard-list>li {
+  margin-bottom: 0.75rem;
+  font-size: 110%;
+}
+
+.assistant-section {
+  background: #D7F7FC;
+  border: 1px solid rgba(42, 183, 202, 0.3);
+}
+.assistant-section h2 {
+  letter-spacing: 0.75px;
+  font-size: 25px !important;
+}
+.assistant-section .flex_name .info {
+  margin-left: 17px;
+}
+.assistant-section .flex_name .info h4 {
+  font-size: 25px;
+  font-weight: 500;
+}
+.assistant-section .flex_name .info p {
+  font-size: 16px;
+  font-weight: bolder;
+}
+.assistant-section .btn {
+  height: 45px !important;
+  line-height: 45px !important;
+}
+.assistant-section .element-underline {
+  border-bottom: 1px solid #FB6107;
 }

public/img/login_icon.svg

@@ -0,0 +1,36 @@
+<svg width="66" height="67" viewBox="0 0 66 67" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M32.4992 0.953003C21.7992 0.953003 12.1992 6.053 6.19922 14.053L7.59922 15.453C13.2992 7.853 22.2992 2.953 32.4992 2.953C49.5992 2.953 63.4992 16.853 63.4992 33.953C63.4992 51.053 49.5992 64.953 32.4992 64.953C22.2992 64.953 13.2992 60.053 7.69922 52.453L6.29922 53.853C12.1992 61.853 21.7992 66.953 32.4992 66.953C50.6992 66.953 65.4992 52.153 65.4992 33.953C65.4992 15.753 50.6992 0.953003 32.4992 0.953003Z" fill="#2AB7CA"/>
+<path d="M23.3 23.353L21.9 24.753L30.1 32.953H0.5V34.953H30.1L21.9 43.153L23.3 44.553L33.9 33.953L23.3 23.353Z" fill="#2AB7CA"/>
+<path d="M32.5 7.953C33.0523 7.953 33.5 7.50529 33.5 6.953C33.5 6.40072 33.0523 5.953 32.5 5.953C31.9477 5.953 31.5 6.40072 31.5 6.953C31.5 7.50529 31.9477 7.953 32.5 7.953Z" fill="#FB6107"/>
+<path d="M37.8002 6.453C37.3002 6.453 36.9002 6.753 36.8002 7.253C36.7002 7.753 37.0002 8.353 37.6002 8.453C38.1002 8.553 38.7002 8.253 38.8002 7.653C38.9002 7.153 38.6002 6.553 38.0002 6.453C37.9002 6.453 37.9002 6.453 37.8002 6.453Z" fill="#FB6107"/>
+<path d="M27.199 6.453C27.099 6.453 27.099 6.453 26.999 6.453C26.499 6.553 26.099 7.053 26.199 7.653C26.299 7.953 26.499 8.153 26.699 8.353C26.899 8.453 27.199 8.553 27.499 8.453C27.999 8.353 28.399 7.853 28.299 7.253C28.099 6.853 27.699 6.453 27.199 6.453Z" fill="#FB6107"/>
+<path d="M22.1994 8.05298C22.0994 8.05298 21.8994 8.05298 21.7994 8.15298C21.2994 8.35298 20.9994 8.95298 21.2994 9.45298C21.4994 9.85298 21.9994 10.153 22.5994 9.95298C23.0994 9.75298 23.3994 9.15298 23.0994 8.65298C22.8994 8.25298 22.5994 8.05298 22.1994 8.05298Z" fill="#FB6107"/>
+<path d="M42.8985 8.05298C42.4985 8.05298 42.0985 8.25298 41.9985 8.65298C41.7985 9.15298 41.9985 9.75298 42.4985 9.95298C42.9985 10.153 43.5985 9.95298 43.7985 9.45298C43.9985 8.95298 43.7985 8.35298 43.2985 8.15298C43.0985 8.05298 42.9985 8.05298 42.8985 8.05298Z" fill="#FB6107"/>
+<path d="M17.4984 10.453C17.2984 10.453 17.0984 10.553 16.8984 10.653C16.3984 10.953 16.2984 11.553 16.5984 12.053C16.8984 12.553 17.4984 12.653 17.9984 12.353C18.4984 12.053 18.5984 11.453 18.2984 10.953C18.0984 10.653 17.7984 10.553 17.4984 10.453Z" fill="#FB6107"/>
+<path d="M47.5 10.453C47.2 10.453 46.8 10.653 46.7 10.853C46.4 11.353 46.5 11.953 47 12.253C47.5 12.553 48.1 12.453 48.4 11.953C48.5 11.753 48.6 11.453 48.6 11.153C48.5 10.853 48.4 10.653 48.2 10.553C47.9 10.553 47.7 10.553 47.5 10.453Z" fill="#FB6107"/>
+<path d="M13.3984 13.853C13.0984 13.853 12.8984 13.953 12.6984 14.153C12.2984 14.553 12.2984 15.153 12.6984 15.553C13.0984 15.953 13.6984 15.953 14.0984 15.553C14.4984 15.153 14.4984 14.553 14.0984 14.153C13.8984 13.953 13.6984 13.853 13.3984 13.853Z" fill="#FB6107"/>
+<path d="M51.5977 13.853C51.2977 13.853 51.0977 13.953 50.8977 14.153C50.4977 14.553 50.4977 15.153 50.8977 15.553C51.2977 15.953 51.8977 15.953 52.2977 15.553C52.6977 15.153 52.6977 14.553 52.2977 14.153C52.0977 13.953 51.8977 13.853 51.5977 13.853Z" fill="#FB6107"/>
+<path d="M54.9984 17.953C54.7984 17.953 54.5984 18.053 54.3984 18.153C53.8984 18.453 53.7984 19.053 54.0984 19.553C54.3984 20.053 54.9984 20.153 55.4984 19.853C55.9984 19.553 56.0984 18.953 55.7984 18.453C55.5984 18.153 55.2984 17.953 54.9984 17.953Z" fill="#FB6107"/>
+<path d="M57.5001 22.653C57.4001 22.653 57.2001 22.653 57.1001 22.753C56.6001 22.953 56.3001 23.453 56.5001 23.953C56.7001 24.453 57.3001 24.753 57.8001 24.453C58.3001 24.153 58.6001 23.653 58.3001 23.153C58.2001 22.853 57.9001 22.653 57.5001 22.653Z" fill="#FB6107"/>
+<path d="M58.9998 27.653C58.8998 27.653 58.8998 27.653 58.7998 27.653C58.2998 27.753 57.8998 28.253 57.9998 28.853C58.0998 29.353 58.5998 29.753 59.1998 29.653C59.6998 29.553 60.0998 29.053 59.9998 28.453C59.8998 28.053 59.4998 27.653 58.9998 27.653Z" fill="#FB6107"/>
+<path d="M59.5 34.953C60.0523 34.953 60.5 34.5053 60.5 33.953C60.5 33.4007 60.0523 32.953 59.5 32.953C58.9477 32.953 58.5 33.4007 58.5 33.953C58.5 34.5053 58.9477 34.953 59.5 34.953Z" fill="#FB6107"/>
+<path d="M58.9994 38.2531C58.4994 38.2531 58.0994 38.5531 57.9994 39.0531C57.8994 39.5531 58.1994 40.1531 58.7994 40.2531C59.2994 40.3531 59.8994 40.0531 59.9994 39.4531C60.0994 38.9531 59.7994 38.3531 59.1994 38.2531C59.0994 38.2531 59.0994 38.2531 58.9994 38.2531Z" fill="#FB6107"/>
+<path d="M57.5001 43.2531C57.1001 43.2531 56.7001 43.4531 56.6001 43.8531C56.4001 44.3531 56.6001 44.9531 57.1001 45.1531C57.6001 45.3531 58.2001 45.1531 58.4001 44.6531C58.6001 44.1531 58.4001 43.5531 57.9001 43.3531C57.7001 43.3531 57.6001 43.2531 57.5001 43.2531Z" fill="#FB6107"/>
+<path d="M55 47.953C54.7 47.953 54.3 48.153 54.2 48.353C53.9 48.853 54 49.453 54.5 49.753C54.7 49.853 55 49.953 55.3 49.853C55.6 49.753 55.8 49.653 55.9 49.453C56.2 48.953 56.1 48.353 55.6 48.053C55.3 48.053 55.2 47.953 55 47.953Z" fill="#FB6107"/>
+<path d="M13.3984 52.053C13.0984 52.053 12.8984 52.153 12.6984 52.353C12.2984 52.753 12.2984 53.353 12.6984 53.753C13.0984 54.153 13.6984 54.153 14.0984 53.753C14.4984 53.353 14.4984 52.753 14.0984 52.353C13.8984 52.153 13.6984 52.053 13.3984 52.053Z" fill="#FB6107"/>
+<path d="M51.5977 52.053C51.2977 52.053 51.0977 52.153 50.8977 52.353C50.4977 52.753 50.4977 53.353 50.8977 53.753C51.2977 54.153 51.8977 54.153 52.2977 53.753C52.6977 53.353 52.6977 52.753 52.2977 52.353C52.0977 52.153 51.8977 52.053 51.5977 52.053Z" fill="#FB6107"/>
+<path d="M17.5 55.353C17.2 55.353 16.8 55.553 16.7 55.753C16.4 56.253 16.5 56.853 17 57.153C17.5 57.453 18.1 57.353 18.4 56.853C18.7 56.353 18.6 55.753 18.1 55.453C17.9 55.453 17.7 55.353 17.5 55.353Z" fill="#FB6107"/>
+<path d="M47.5002 55.353C47.3002 55.353 47.1002 55.453 46.9002 55.553C46.7002 55.653 46.5002 55.953 46.5002 56.153C46.4002 56.453 46.5002 56.653 46.7002 56.953C47.0002 57.453 47.6002 57.553 48.1002 57.253C48.6002 56.953 48.7002 56.353 48.4002 55.853C48.2002 55.553 47.8002 55.353 47.5002 55.353Z" fill="#FB6107"/>
+<path d="M22.1993 57.853C21.7993 57.853 21.3993 58.053 21.2993 58.453C21.0993 58.953 21.2993 59.553 21.7993 59.753C22.2993 59.953 22.8993 59.753 23.0993 59.253C23.2993 58.753 23.0993 58.153 22.5993 57.953C22.3993 57.953 22.2993 57.853 22.1993 57.853Z" fill="#FB6107"/>
+<path d="M42.7992 57.853C42.6992 57.853 42.4992 57.853 42.3992 57.953C42.1992 58.053 41.9992 58.253 41.8992 58.453C41.7992 58.653 41.7992 58.953 41.8992 59.253C42.0992 59.753 42.6992 60.053 43.1992 59.753C43.3992 59.653 43.5992 59.453 43.6992 59.253C43.7992 59.053 43.7992 58.753 43.6992 58.453C43.5992 58.153 43.1992 57.853 42.7992 57.853Z" fill="#FB6107"/>
+<path d="M27.3002 59.453C26.8002 59.453 26.4002 59.753 26.3002 60.253C26.2002 60.753 26.5002 61.353 27.1002 61.453C27.7002 61.553 28.2002 61.253 28.3002 60.653C28.4002 60.053 28.1002 59.553 27.5002 59.453C27.4002 59.453 27.3002 59.453 27.3002 59.453Z" fill="#FB6107"/>
+<path d="M37.7967 59.453C37.6967 59.453 37.6967 59.453 37.5967 59.453C37.0967 59.553 36.6967 60.053 36.7967 60.653C36.8967 60.953 36.9967 61.153 37.1967 61.253C37.3967 61.353 37.6967 61.453 37.9967 61.453C38.2967 61.353 38.4967 61.253 38.5967 61.053C38.6967 60.853 38.7967 60.553 38.6967 60.253C38.6967 59.753 38.1967 59.453 37.7967 59.453Z" fill="#FB6107"/>
+<path d="M32.5 61.953C33.0523 61.953 33.5 61.5053 33.5 60.953C33.5 60.4007 33.0523 59.953 32.5 59.953C31.9477 59.953 31.5 60.4007 31.5 60.953C31.5 61.5053 31.9477 61.953 32.5 61.953Z" fill="#FB6107"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="65" height="66" fill="white" transform="translate(0.5 0.953003)"/>
+</clipPath>
+</defs>
+</svg>

public/img/phone.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.4125 22.2563C4.0125 22.2563 1.93125 20.55 1.4625 18.1875C0.6375 14.0625 0.6375 9.82501 1.4625 5.70001C1.93125 3.31876 3.99375 1.63126 6.4125 1.63126C7.03125 1.63126 7.5 2.17501 7.425 2.79376L6.975 6.15001C6.84375 7.06876 6.05625 7.76251 5.1375 7.76251C4.2 7.76251 3.50625 7.51876 3.50625 7.51876V16.7438C3.50625 16.7438 4.2375 16.125 5.1375 16.125C6.075 16.125 6.8625 16.8188 6.975 17.7375L7.21875 19.5L7.125 22.2563H6.4125Z" fill="white"/>
+<path d="M6.9375 22.2562L15.0938 22.3125C19.5938 22.3125 23.25 18.6562 23.25 14.1562C23.25 9.65625 19.5938 6 15.0938 6C10.5938 6 6.9375 9.65625 6.9375 14.1562V22.2562Z" fill="white"/>
+<path d="M6.41245 22.8188C3.74995 22.8188 1.42495 20.925 0.918701 18.3C0.0749512 14.0813 0.0749512 9.80626 0.918701 5.58751C1.4437 2.96251 3.74995 1.06876 6.41245 1.06876C6.86245 1.06876 7.31245 1.27501 7.61245 1.61251C7.91245 1.95001 8.0437 2.41876 7.98745 2.86876L7.53745 6.22501C7.3687 7.42501 6.33745 8.32501 5.13745 8.32501C4.72495 8.32501 4.34995 8.28751 4.0687 8.23126V15.7875C4.3687 15.675 4.7437 15.5813 5.13745 15.5813C6.33745 15.5813 7.3687 16.4813 7.53745 17.6813L7.7812 19.4438C7.8187 19.7438 7.61245 20.0438 7.2937 20.0813C6.9937 20.1188 6.6937 19.9125 6.6562 19.5938L6.41245 17.8125C6.3187 17.175 5.77495 16.6875 5.1187 16.6875C4.4437 16.6875 3.8437 17.1563 3.8437 17.175C3.67495 17.3063 3.44995 17.3438 3.2437 17.25C3.0562 17.1563 2.92495 16.9688 2.92495 16.7438V7.51876C2.92495 7.33126 3.0187 7.16251 3.14995 7.06876C3.29995 6.95626 3.48745 6.93751 3.6562 6.99376C3.6562 6.99376 4.2937 7.20001 5.1187 7.20001C5.77495 7.20001 6.3187 6.71251 6.41245 6.07501L6.86245 2.71876C6.8812 2.53126 6.8062 2.41876 6.74995 2.36251C6.6937 2.30626 6.5812 2.21251 6.41245 2.21251C4.27495 2.21251 2.43745 3.73126 2.02495 5.83126C1.2187 9.90001 1.2187 14.0438 2.02495 18.1125C2.43745 20.2125 4.2937 21.7313 6.41245 21.7313C6.7312 21.7313 6.97495 21.975 6.97495 22.2938C6.97495 22.6125 6.71245 22.8188 6.41245 22.8188Z" fill="#08415C" stroke="#08415C" stroke-width="0.3"/>
+<path d="M15.0938 22.875H8.98125C8.6625 22.875 8.41875 22.6313 8.41875 22.3125C8.41875 21.9937 8.6625 21.75 8.98125 21.75H15.0938C19.275 21.75 22.6875 18.3375 22.6875 14.1562C22.6875 9.975 19.275 6.5625 15.0938 6.5625C10.9125 6.5625 7.5 9.975 7.5 14.1562C7.5 14.475 7.25625 14.7188 6.9375 14.7188C6.61875 14.7188 6.375 14.475 6.375 14.1562C6.375 9.35625 10.2937 5.4375 15.0938 5.4375C19.8938 5.4375 23.8125 9.35625 23.8125 14.1562C23.8125 18.9563 19.8938 22.875 15.0938 22.875Z" fill="#2AB7CA" stroke="#2AB7CA" stroke-width="0.3"/>
+<path d="M17.4187 17.5125H11.6062C11.2875 17.5125 11.0437 17.2688 11.0437 16.95C11.0437 16.6313 11.2875 16.3875 11.6062 16.3875H17.4375C17.7562 16.3875 18 16.6313 18 16.95C18 17.2688 17.7375 17.5125 17.4187 17.5125Z" fill="#2AB7CA" stroke="#2AB7CA" stroke-width="0.3"/>
+<path d="M17.4187 14.025H11.6062C11.2875 14.025 11.0437 13.7812 11.0437 13.4625C11.0437 13.1437 11.2875 12.9 11.6062 12.9H17.4375C17.7562 12.9 18 13.1437 18 13.4625C18 13.7812 17.7375 14.025 17.4187 14.025Z" fill="#2AB7CA" stroke="#2AB7CA" stroke-width="0.3"/>
+</svg>

resources/views/account-setup.blade.php

@@ -1,55 +1,69 @@
 @extends('layouts.login')
 @section('content')
 
-<div id="formView" class="blue-card p-4">
-  <form action="{{route('submit-account-setup')}}" method="post">
-    <div class="text-center d-flex align-items-center my-3">
-      <img src="/img/icon.svg" alt="Logo" height="35">
-      <h5 class="font-weight-bold ml-2 mb-0">Account Setup</h5>
+<div id="formView">
+  <div class="d-flex align-items-center flex-column text-center p-3">
+        <div class="flex-grow-1 single-form-heading font-weight-medium">Create Account</div>
+        <p class="text-muted">Enter your details below.</p>
     </div>
-      <p>Enter your details below.</p>
-      @csrf
-      @if(session('message'))
-      <div class="alert alert-info">{{session('message')}}</div>
-      @endif
-      <div class="form-group">
-          <label for="" class="control-label">First Name</label>
-          <input class="form-control" name="first_name" autofocus value="{{old('first_name')}}">
-          @error('first_name')
-          <span class="text-sm text-muted">{{$message}}</span>
-          @enderror
-      </div>
+    <form action="{{route('submit-account-setup')}}" class="form" method="post">
+        <div class="icon_wrap">
+          <img src="{{asset('/img/login_icon.svg')}}" alt="">
+        </div>
+        @csrf
+        @if(session('message'))
+        <div class="alert alert-info">{{session('message')}}</div>
+        @endif
+        <div class="form-group">
+            <label for="" class="control-label">First Name</label>
+            <input class="form-control" name="first_name" autofocus required value="{{old('first_name')}}">
+            @error('first_name')
+            <span class="text-sm text-danger">{{$message}}</span>
+            @enderror
+        </div>
 
-      <div class="form-group">
-          <label for="" class="control-label">Last Name</label>
-          <input class="form-control" name="last_name" autofocus value="{{old('last_name')}}">
-          @error('last_name')
-          <span class="text-sm text-muted">{{$message}}</span>
-          @enderror
-      </div>
+        <div class="form-group">
+            <label for="" class="control-label">Last Name</label>
+            <input class="form-control" name="last_name" autofocus required value="{{old('last_name')}}">
+            @error('last_name')
+            <span class="text-sm text-danger">{{$message}}</span>
+            @enderror
+        </div>
 
-      <div class="form-group">
-          <label for="" class="control-label">Email Address</label>
-          <input class="form-control" name="email_address" autofocus value="{{old('email_address')}}">
-          @error('email_address')
-          <span class="text-sm text-muted">{{$message}}</span>
-          @enderror
-      </div>
+        <div class="form-group">
+            <label for="" class="control-label">Email Address</label>
+            <input class="form-control" name="email_address" autofocus required value="{{old('email_address')}}">
+            @error('email_address')
+            <span class="text-sm text-danger">{{$message}}</span>
+            @enderror
+        </div>
 
-      <div class="form-group">
-          <label for="" class="control-label">Password</label>
-          <input class="form-control pass" type="password" name="password" autofocus value="{{old('password')}}">
-          @error('password')
-          <span class="text-sm text-muted">{{$message}}</span>
-          @enderror
-      </div>
+        <div class="form-group">
+            <label for="" class="control-label">Password</label>
+            <input class="form-control pass" type="password" name="password" required autofocus value="{{old('password')}}">
+            @error('password')
+            <span class="text-sm text-danger">{{$message}}</span>
+            @enderror
+        </div>
 
-      <div class="row">
-          <div class="col-12 text-center">
-              <input type="submit" name="Submit" value="Create Account" class="btn btn-orange w-100 py-2">
-          </div>
-      </div>
-  </form>
-  <p><small class="text-center d-block text-muted my-3">If you have any questions at all, please contact your Dedicated HR Representative at the phone number or email displayed inside this portal.</small></p>
+        <div class="row mb-4">
+            <div class="col-12 text-center">
+                <input type="submit" name="Submit" value="Create Account" disabled="true" class="btn btn-orange text-uppercase py-2 px-4">
+            </div>
+        </div>
+    </form>
 </div>
+<script type="text/javascript">
+  $(document).ready(function(){
+    $('.pass').on('keyup', function() {
+      var validPassword = $('.strengthify-container').hasClass('password-good');
+      console.log($('.strengthify-container').hasClass('password-good'));
+      if(validPassword) {
+        $('[type=submit]').prop('disabled', false);
+      }else {
+        $('[type=submit]').prop('disabled', true);
+      }
+    });
+  })
+</script>
 @endsection

resources/views/confirm-auth-token.blade.php

@@ -1,11 +1,13 @@
 @extends('layouts.login')
 @section('content')
 
-<div id="confirmAuthTokenComponent" class="blue-card p-4" v-cloak>
-  <form action="{{route('process-confirm-auth-token')}}" method="post">
-    <div class="text-center d-flex align-items-center my-3">
-      <img src="/img/icon.svg" alt="Logo" height="35">
-      <h5 class="font-weight-bold ml-2 mb-0">Confirm Token</h5>
+<div id="confirmAuthTokenComponent" v-cloak>
+  <div class="d-flex align-items-center flex-column text-center p-3">
+        <div class="flex-grow-1 single-form-heading font-weight-medium">Confirm Token</div>
+    </div>
+  <form action="{{route('process-confirm-auth-token')}}" class="form" method="post">
+    <div class="icon_wrap">
+      <img src="{{asset('/img/login_icon.svg')}}" alt="">
     </div>
     @csrf
     @if(session('message'))
@@ -17,29 +19,28 @@
           Please enter the confirmation token sent to {{ $maskedCellNumber }}.
         </strong>
       </label>
-      <input class="form-control" name="confirmation_token" autocomplete="off" autofocus value="{{old('confirmation_token')}}">
+      <input class="form-control" name="confirmation_token" autocomplete="off" autofocus required value="{{old('confirmation_token')}}">
     </div>
     <div class="row">
       <div class="col-12 text-center">
-        <input type="submit" name="sendToken" value="Confirm Token" class="btn btn-orange btn-sm w-100 py-2">
+        <input type="submit" name="sendToken" value="Confirm Token" class="btn btn-orange text-uppercase py-2 px-4">
       </div>
     </div>
-  </form>
-  <div class="text-center mt-3">
-    <div class="d-flex align-items-center flex-wrap justify-content-center">     
-        <a href="#" class="text-underline" resend-token>
-          <u v-if="!loading">Resend token</u>
-          <u v-else><i class="fas fa-circle-notch fa-spin"></i> Resending...</u>
+    <div class="text-center mt-3">
+      <div class="d-flex align-items-center flex-wrap justify-content-center">
+        <a href="#" class="text-pry" resend-token>
+          <span v-if="!loading">Resend token</span>
+          <span v-else><i class="fas fa-circle-notch fa-spin"></i> Resending...</span>
         </a>
-      <span class="mx-2 font-weight-bold">OR</span>
-      <a href="{{ route('login') }}"><u>Change phone number</u></a>
+        <span class="mx-2 font-weight-bold">OR</span>
+        <a href="{{ route('login') }}" class="text-pry">Change phone number</a>
+      </div>
     </div>
-  </div>
-  <div v-if="response" class="text-center">
-    <small v-if="!response.success" class="text-danger"><i class="fas fa-exclamation-triangle"></i> @{{ response.message }}</small>
-    <small v-else class="text-success"><i class="fas fa-check-circle"></i> Confirmation code has been resent!</small>
-  </div>
-  <p><small class="text-center d-block text-muted my-3">If you have any questions at all, please contact your Dedicated HR Representative at the phone number or email displayed inside this portal.</small></p>
+    <div v-if="response" class="text-center mb-4">
+      <small v-if="!response.success" class="text-danger"><i class="fas fa-exclamation-triangle"></i> @{{ response.message }}</small>
+      <small v-else class="text-success"><i class="fas fa-check-circle"></i> Confirmation code has been resent!</small>
+    </div>
+  </form>
 </div>
 
 <script>
@@ -72,4 +73,4 @@
     }
   });
 </script>
-@endsection
+@endsection

resources/views/layouts/login.blade.php

@@ -2,89 +2,184 @@
 <html lang="en">
 
 <head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="csrf-token" content="{{ csrf_token() }}">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <title>Leadership Health | The Highest Quality of Care</title>
-  <meta name="description" content="The Leadership Health program was developed in collaboration with the University of Maryland School of Public Health through a Maryland Industrial Partnerships (MIPS) project.">
-  <link rel="icon" href={{asset('img/icon.svg')}}>
-  <link rel="stylesheet" href="/vendor/bootstrap/bootstrap.min.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
-  <link href="{{ asset('/css/strengthify.min.css') }}" rel="stylesheet">
-  <link href="{{asset('css/style.css')}}" rel=stylesheet>
-  <link href="{{asset('css/skin.css')}}" rel=stylesheet>
-  <link href="{{asset('css/landing.css')}}" rel=stylesheet>
-  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
-  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
-  <script src="{{asset('js/jquery.mask.js')}}"></script>
-  <script src="{{ asset('/js/jquery.strengthify.min.js') }}"></script>
-  <script src='https://www.google.com/recaptcha/api.js'></script>
-  <script>
-    $(function() {
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="Leadership Health | The Highest Quality Of Care">
+    <meta name="theme-color" content="#49529B">
+    <meta name="title" content="Leadership Health">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://leadershiphealth.org/">
+    <meta property="og:title" content="Leadership Health">
+    <meta property="og:description" content="Leadership Health | The Highest Quality Of Care">
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:url" content="https://leadershiphealth.org/">
+    <meta property="twitter:title" content="Leadership Health">
+    <meta property="twitter:description" content="Leadership Health | The Highest Quality Of Care">
+    <title>Leadership Health | The Highest Quality Of Care</title>
+    <meta name="description"
+          content="The Leadership Health program was developed in collaboration with the University of Maryland School of Public Health through a Maryland Industrial Partnerships (MIPS) project.">
+    <meta name="keywords"
+          content="Scholar, Health, Leadership, covid-19, Coronavirus, Deaf, Hard of Hearing, Maryland, MIPS, Industrial, Partnership">
+    <link rel="icon" type="image/png" href="{{asset('img/icon.svg')}}">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
+    <link href="{{ asset('/css/strengthify.min.css') }}" rel="stylesheet">
+    <link href="{{ asset('css/layout.css') }}" rel=stylesheet>
+    <link href="{{ asset('css/lh.css') }}" rel=stylesheet>
+    <link href="{{asset('css/style.css')}}" rel=stylesheet>
+    <link href="{{asset('css/pristine.css')}}" rel=stylesheet>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
+    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
+    <script src="{{ asset('/js/jquery.strengthify.min.js') }}"></script>
+    <script src='https://www.google.com/recaptcha/api.js'></script>
+    <script>
+        $(function() {
       $.ajaxSetup({
         headers: {
           'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
         }
       });
     });
-  </script>
+    </script>
 </head>
 
 <body>
-  <nav class="navbar navbar-expand-lg py-1">
-        <div class="container-fluid position-relative">
-            <a href="{{ route('login') }}"><img class="logo" src="{{asset('img/logo.svg')}}"></a>
-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navBar" aria-controls="navBar" aria-expanded="false" aria-label="Toggle navigation">
-                <i class="fas fa-bars"></i>
-            </button>
-            <div class="collapse navbar-collapse mobile" id="navBar">
-                <ul class="navbar-nav ml-auto">
-                  <li class="nav-item">
-                    <a class="d-flex align-items-center text-dark" href="{{ config('app.backToLeadershipHealthUrl') }}">
-                      <img class="mr-1" height="20" src="{{asset('img/chart.svg')}}">Back to LeadershipHealth.org
+<div id="mask" style="background: rgba(0, 0, 0, 0) url(&quot;/vanillaspin.gif&quot;) no-repeat scroll center center; position: fixed; top: 0px; left: 0px; z-index: 9999; width: 100%; height: 100%; display: none;">
+</div>
+<div id="moe-form-mask" style="background: rgba(0, 0, 0, .1) no-repeat scroll center center; position: fixed; top: 0px; left: 0px; z-index: 97; width: 100%; height: 100%; display: none;">
+</div>
+<nav class="navbar navbar-expand-lg py-1">
+    <div class="container main-nav position-relative">
+        <a href="{{route('login')}}"><img class="logo" src="{{asset('img/logo.svg')}}"></a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navBar" aria-controls="navBar"
+                aria-expanded="false" aria-label="Toggle navigation">
+            <i class="fas fa-bars"></i>
+        </button>
+        <div class="collapse navbar-collapse mobile" id="navBar">
+            <ul class="navbar-nav mobile">
+                <li class="nav-item">
+                    <a class="nav-link" href="https://leadershiphealth.org/programs">For Patients</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="https://leadershiphealth.org/health-plans">Health Plans</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="https://leadershiphealth.org/employers">Employers</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="https://leadershiphealth.org/providers">For Providers</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="https://leadershiphealth.org/about">About Us</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="https://leadershiphealth.org/careers">Careers</a>
+                </li>
+            </ul>
+            <ul class="navbar-nav ml-auto">
+                <li class="nav-item web">
+                    <a class="d-flex align-items-center nav-link" href="tel:1-800-707-9705"><img class="mr-1" height="20" src="{{asset('img/phone.svg')}}">1-800-707-9705</a>
+                </li>
+                <li class="nav-item">
+                    <a class="d-flex align-items-center nav-link" href="{{ config('app.backToLeadershipHealthUrl') }}">
+                        <img class="mr-1" height="20" src="{{asset('img/chart.svg')}}">Back to LeadershipHealth.org
                     </a>
-                  </li>
-                </ul>
-            </div>
-        </div>
-    </nav>
-
-  <hr class="m-0">
-  <div class="welcome-container">
-    <div class="container my-3 my-md-4 my-lg-5">
-      <div class="row">
-        <div class="col-lg-7">
-          <h4 class="title">Find the rewarding career you’ve been looking for at Leadership Health.</h4>
-          <p>Thank you for your interest in working with LeadershipHealth.</p>
-          <p>We use this portal to:</p>
-          <ul class="icon-list">
-            <li>Organize the HR process.</li>
-            <li>Coordinate communication with our HR team.</li>
-            <li>Test your webcam and/or smartphone to confirm that your hardware is ready for telehealth.</li>
-          </ul>
+                </li>
+            </ul>
         </div>
-        <div class="col-lg-5">
-          @yield('content')
+    </div>
+</nav>
+<nav class="navbar navbar-expand-lg navBarWeb">
+    <div class="container">
+        <div>
+            <ul class="navbar-nav ml-0 mr-auto" id="navBarWeb">
+              <li class="nav-item">
+                  <a class="nav-link" href="https://leadershiphealth.org/programs">For Patients</a>
+              </li>
+              <li class="nav-item">
+                  <a class="nav-link" href="https://leadershiphealth.org/health-plans">Health Plans</a>
+              </li>
+              <li class="nav-item">
+                  <a class="nav-link" href="https://leadershiphealth.org/employers">Employers</a>
+              </li>
+              <li class="nav-item">
+                  <a class="nav-link" href="https://leadershiphealth.org/providers">For Providers</a>
+              </li>
+              <li class="nav-item">
+                  <a class="nav-link" href="https://leadershiphealth.org/about">About Us</a>
+              </li>
+              <li class="nav-item">
+                  <a class="nav-link" href="https://leadershiphealth.org/careers">Careers</a>
+              </li>
+            </ul>
         </div>
-      </div>
     </div>
-    @include('landing')
+</nav>
+<div class="bg-white lh-container">
+  <div class="lh-form-container container">
+    @yield('content')
   </div>
-  <footer class="bg-light-grey d-flex align-items-center flex-column border-top">
-    <div class="py-3">
-      <p class="mb-0 text-center"><small>Copyright &copy; {{getdate()["year"]}} LeadershipHealth LLC. All rights reserved.</small> </p>
+</div>
+<footer class="pt-4 pt-md-5 text-white">
+    <div class="container">
+        <div class="flex-footer">
+            <div class="">
+                <img src="{{asset('img/logo-white.svg')}}">
+            </div>
+            <div class="text-center">
+                <a href="tel:1-800-707-9705" class="text-white">
+                    <h5 class="mt-2">1-800-707-9705</h5>
+                </a>
+                <a style="display: none;" href="https://leadershiphealth.org/covid" class="text-white">
+                    COVID Resources
+                </a>
+            </div>
+            <div>
+                <h5 class="mt-2">Important Links</h5>
+                <ul class="m-0">
+                    <li><a href="https://leadershiphealth.org/programs">For Patients</a></li>
+                    <li><a href="https://leadershiphealth.org/health-plans">Health Plans</a></li>
+                    <li><a href="https://leadershiphealth.org/employers">Employers</a></li>
+                    <li><a href="https://leadershiphealth.org/providers">For Providers</a></li>
+                    <li><a href="https://leadershiphealth.org/about">About Us</a></li>
+                    <li><a href="https://leadershiphealth.org/careers">Careers</a></li>
+                </ul>
+            </div>
+            <div>
+                <h5 class="mt-2">Contact Us</h5>
+                <ul class="m-0">
+                    <li><a href="https://leadershiphealth.org/contact">Get in touch</a></li>
+                    <li><a href="https://leadershiphealth.org/privacy-policy">Privacy Policy</a></li>
+                    <li><a href="https://leadershiphealth.org/terms-of-use">Terms of Service</a></li>
+                </ul>
+            </div>
+        </div>
     </div>
-  </footer>
+    <div class="bg-light-grey mt-0 mt-md-5 py-2">
+        <div class="container">
+            <p class="text-dark-pry text-center m-0"><small>Copyright © {{getdate()["year"]}} Leadership Health Inc. All Rights Reserved.</small></p>
+        </div>
+    </div>
+</footer>
 </body>
-<script src="/vendor/bootstrap/popper.min.js"></script>
-<script src="/vendor/bootstrap/bootstrap.min.js"></script>
 <script>
-  $(document).ready(function() {
-      $('.phone').mask('000-000-0000');
-      $('.pass').strengthify({
-          zxcvbn:'/js/zxcvbn.js'
+    $(document).ready(function() {
+        // $('.phone').mask('000-000-0000');
+        $('.pass').strengthify({
+            zxcvbn: '/js/zxcvbn.js'
         })
-  });
+    });
 </script>
+<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+        crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
+        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
+        crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
 </html>

resources/views/layouts/login_with_content.blade.php

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="csrf-token" content="{{ csrf_token() }}">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>Leadership Health | The Highest Quality of Care</title>
+  <meta name="description" content="The Leadership Health program was developed in collaboration with the University of Maryland School of Public Health through a Maryland Industrial Partnerships (MIPS) project.">
+  <link rel="icon" href={{asset('img/icon.svg')}}>
+  <link rel="stylesheet" href="/vendor/bootstrap/bootstrap.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
+  <link href="{{ asset('/css/strengthify.min.css') }}" rel="stylesheet">
+  <link href="{{asset('css/style.css')}}" rel=stylesheet>
+  <link href="{{asset('css/skin.css')}}" rel=stylesheet>
+  <link href="{{asset('css/landing.css')}}" rel=stylesheet>
+  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
+  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
+  <script src="{{asset('js/jquery.mask.js')}}"></script>
+  <script src="{{ asset('/js/jquery.strengthify.min.js') }}"></script>
+  <script src='https://www.google.com/recaptcha/api.js'></script>
+  <script>
+    $(function() {
+      $.ajaxSetup({
+        headers: {
+          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+        }
+      });
+    });
+  </script>
+</head>
+
+<body>
+  <nav class="navbar navbar-expand-lg py-1">
+        <div class="container-fluid position-relative">
+            <a href="{{ route('login') }}"><img class="logo" src="{{asset('img/logo.svg')}}"></a>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navBar" aria-controls="navBar" aria-expanded="false" aria-label="Toggle navigation">
+                <i class="fas fa-bars"></i>
+            </button>
+            <div class="collapse navbar-collapse mobile" id="navBar">
+                <ul class="navbar-nav ml-auto">
+                  <li class="nav-item">
+                    <a class="d-flex align-items-center text-dark" href="{{ config('app.backToLeadershipHealthUrl') }}">
+                      <img class="mr-1" height="20" src="{{asset('img/chart.svg')}}">Back to LeadershipHealth.org
+                    </a>
+                  </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+  <hr class="m-0">
+  <div class="welcome-container">
+    <div class="container my-3 my-md-4 my-lg-5">
+      <div class="row">
+        <div class="col-lg-7">
+          <h4 class="title">Find the rewarding career you’ve been looking for at Leadership Health.</h4>
+          <p>Thank you for your interest in working with LeadershipHealth.</p>
+          <p>We use this portal to:</p>
+          <ul class="icon-list">
+            <li>Organize the HR process.</li>
+            <li>Coordinate communication with our HR team.</li>
+            <li>Test your webcam and/or smartphone to confirm that your hardware is ready for telehealth.</li>
+          </ul>
+        </div>
+        <div class="col-lg-5">
+          @yield('content')
+        </div>
+      </div>
+    </div>
+    @include('landing')
+  </div>
+  <footer class="bg-light-grey d-flex align-items-center flex-column border-top">
+    <div class="py-3">
+      <p class="mb-0 text-center"><small>Copyright &copy; {{getdate()["year"]}} LeadershipHealth LLC. All rights reserved.</small> </p>
+    </div>
+  </footer>
+</body>
+<script src="/vendor/bootstrap/popper.min.js"></script>
+<script src="/vendor/bootstrap/bootstrap.min.js"></script>
+<script>
+  $(document).ready(function() {
+      $('.phone').mask('000-000-0000');
+      $('.pass').strengthify({
+          zxcvbn:'/js/zxcvbn.js'
+        })
+  });
+</script>
+</html>

resources/views/login.blade.php

@@ -1,21 +1,24 @@
 @extends('layouts.login')
 @section('content')
 
-<div id="formView" class="blue-card p-4">
-    <form action="{{route('send-sms-auth-token')}}" method="post">
-        <div class="text-center d-flex align-items-center my-3">
-          <img src="/img/icon.svg" alt="Logo" height="35">
-          <h5 class="font-weight-bold ml-2 mb-0">Sign Up</h5>
-        </div>
+<div id="formView">
+  <div class="d-flex align-items-center flex-column text-center p-3">
+        <div class="flex-grow-1 single-form-heading font-weight-medium">HR Portal</div>
+        <p class="text-muted">Please enter your cell phone number below to receive an SMS token, then follow the prompts. If you are not in the U.S., please include + and the country code.</p>
+    </div>
+    <form action="{{route('send-sms-auth-token')}}" class="form mx-2" method="post">
+      <div class="icon_wrap">
+        <img src="{{asset('/img/login_icon.svg')}}" alt="">
+      </div>
         @csrf
         @if(session('message'))
         <div class="alert alert-info">{{session('message')}}</div>
         @endif
         <div class="form-group">
-            <label>Enter Your Mobile Number (to receive an SMS token)</label>
-            <input type="tel" class="form-control phone" name="cell_number" autocomplete="off" value="{{old('cell_number')}}">
-            <small class="d-block mt-2 mb-3 text-dark text-center">
-              *Your mobile provider's standard rates for sending and receiving text messages will apply.
+            <label>Phone Number</label>
+            <input type="tel" class="form-control phone" name="cell_number" autocomplete="off" autofocus required value="{{old('cell_number')}}">
+            <small class="d-block mt-2 mb-3 text-dark font-italic">
+              *Your mobile provider's standard text messaging rates will apply.
             </small>
         </div>
 
@@ -28,12 +31,11 @@
             Please confirm your are not a robot.
         </small>
         @enderror
-        <div class="row">
+        <div class="row mb-4">
             <div class="col-12 text-center">
-                <input type="submit" name="sendToken" value="Send SMS Token" class="btn btn-orange text-uppercase w-100 py-2">
+                <input type="submit" name="sendToken" value="Send SMS Token" class="btn btn-orange text-uppercase py-2 px-4">
             </div>
         </div>
-        <p><small class="text-center d-block text-muted my-3">If you have any questions at all, please contact our HR team at the phone number or email displayed inside this portal.</small></p>
     </form>
 </div>
 @endsection