/*
**
**  Cricket Debt Counseling
**  Main Styles
**
**  Contents
**  1.  Variables
**  2.  Basic Elements
**  3.  Specific Elements/Helper Classes
**  4.  Header
**  5.  Footer
**  6.  Homepage
**  7.  Forms
**  8.  Modal
**  9.  Accordion
**  10. Other Pages
**
*/

/*
**  Variables
*/
:root {
  --blue-primary:   #0288D1;
  --blue-lighter:   #80D8FF;
  --blue-darker:    #0D6290;
  --orange-primary: #FF9800;
  --green-primary:  #4DB6AC;
  --green-lighter:  #5ED499;
  --gray-primary:   #66656E;
  --gray-lighter:   #E5E5E5;
  --copy-primary:   #222;
  --font-primary:   'Raleway', Helvetica, Arial, sans-serif;
}

/*
**  Basic Elements
*/

html {
  font-size:62.5%;
  scroll-behavior: smooth;
}

body {
  color:var(--copy-primary);
  font-family:var(--font-primary);
  font-size:1.6rem;
  font-weight:400;
  line-height:1.6;
}

h1, h2, h3,
h4, h5, h6 {
  font-weight:700;
}

h1 {
  display:none;
}

h2 {
  font-size:5rem;
  color:#fff;
  text-align:center;
}

h3 {
  font-size:3.2rem;
}

h4 {
  font-size:2.8rem;
}

h5 {
  font-size:2.2rem;
}

h6 {
  font-size:1.6rem;
}

p {
  margin-bottom:1.5em;
}

a, button {
  color:inherit;
  font-weight:700;
  text-decoration:underline;
  transition:all .3s ease-in-out;
}

blockquote {
  position:relative;
  font-size:1.8rem;
  padding-left:6em;
}

blockquote::before {
  content:'\201C';
  position:absolute;
  top:-.1em;
  left:0;
  color:var(--green-primary);
  font-size:24rem;
  font-weight:700;
  line-height:1;
}

blockquote > .cite::before {
  content:'';
  display:block;
  width:40px;
  height:1px;
  background-color:var(--blue-lighter);
  margin-bottom:1.5em;
}

/*
**  Specific Elements/Helper Classes
*/

.container-fluid {
  padding:4em 0;
}

.btn {
  color:#fff;
  font-size:inherit;
  font-weight:700;
  letter-spacing: .02em;
  margin:0 auto;
  padding:.5em 1.5em;
  border-radius:1.5em;
  text-decoration:none;
}

.btn-primary {
  background: var(--blue-primary);
  background: -moz-linear-gradient(left, var(--blue-primary) 0%, var(--blue-lighter) 100%);
  background: -webkit-linear-gradient(left, var(--blue-primary) 0%,var(--blue-lighter) 100%);
  background: linear-gradient(to right, var(--blue-primary) 0%,var(--blue-lighter) 100%);
  min-width: 7em;
  border:none;
}

.btn-secondary {
  background-color:var(--orange-primary);
  border-color:var(--orange-primary);
}

.btn-tertiary {
  background-color:var(--blue-primary);
  min-width:8em;
}

.btn-outline {
  color:var(--blue-primary);
  border-color:var(--blue-primary);
}

.alert-primary {
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  background-color:#C7EFEB;
  color:var(--copy-primary);
  border-color:var(--green-primary);
}

.alert-primary.text-left {
  justify-content: flex-start;
}

.alert-primary p,
.alert-secondary p {
  margin:0;
}

.alert-secondary {
  display:flex;
  justify-content: center;
  align-items:center;
  color:#fff;
  font-weight:700;
  font-size:1.4rem;
  background: var(--blue-primary);
  background: -moz-linear-gradient(left, var(--blue-primary) 0%, var(--green-primary) 100%);
  background: -webkit-linear-gradient(left, var(--blue-primary) 0%,var(--green-primary) 100%);
  background: linear-gradient(to right, var(--blue-primary) 0%,var(--green-primary) 100%);
  min-width: 7em;
  border:none;
}

.bg-green {
  background-color:rgba(77, 182, 172, .3)
}

.bg-white {
  background-color:rgba(255,255,255, .7);
}

.light {
  color:#fff;
}

.dark-bg {
  color:#fff;
}

.overlay {
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction:column;
  text-align:center;
  background-color:rgba(0,0,0,.85);
  margin:6em 0;
  padding:6em 0;
}

.road-bg {
  background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)), url('img/hero_01.jpg') fixed no-repeat;
  background-size:cover;
  background-position:center;
}

.road-bg.holiday {
  background:url('img/hero_01.jpg') fixed no-repeat;
  background-size:cover;
  background-position:center;
}

.separator-green {
  border-bottom:20px solid var(--green-primary);
}

.card {
  background-color:rgba(255,255,255,.9);
  max-width:820px;
  margin:2em auto;
  padding:2em;
}

.block {
  display:block;
}

.req-indicator {
  display:flex;
  justify-content: flex-end;
  font-weight:700;
}

.req-indicator span {
  background-color:#fff;
  padding:.25em .5em .25em .25em;
}

@media (min-width: 1200px) {
  .container {
    max-width:1200px;
  }
}

/*
**  Header
*/

header {
  background-color:#fff;
}

header .navbar {
  display:flex;
  justify-content: space-between;
  align-items: center;
  padding:.5em 2em;
}

.navbar-collapse {
  display:flex;
  justify-content: flex-end;
}

.navbar .nav {
  font-family:var(--font-primary);
  font-weight:700;
  text-transform:uppercase;
}

.navbar .nav-item {
  margin:0 .25em;
  padding:0 .25em;
  cursor:pointer;
}

.navbar .nav-link {
  color:var(--copy-primary);
  padding:.5em 1em;
  text-decoration: none;
  border:2px solid transparent;
  cursor:pointer;
}

.navbar .nav-link:hover,
a[data-toggle="modal"]:not([href]):hover {
  color:#fff;
  background-color:var(--blue-primary);
  border-color:var(--blue-primary);
}

.navbar .nav-link.active {
  border-bottom:2px solid var(--blue-primary);
}

.navbar .nav-item.secondary {
  padding-right:0;
  border-left:1px solid var(--blue-lighter);
  padding-left:2em;
}

.navbar .nav-item.secondary .nav-link {
  color:#fff;
  background-color:var(--blue-primary);
  text-transform:capitalize;
  margin-right:0;
  border:2px solid var(--blue-primary);
}

.navbar .nav-item.secondary .nav-link:hover {
  color:var(--blue-primary);
  background-color:transparent;
}

.navbar-toggler {
  font-size:1.5rem;
  padding:.25em .5em;
}

@media(max-width:991px) {
  .nav .nav-item {
    flex-basis:100%;
    text-align:right;
    margin:0;
    padding:0;
  }

  .nav .nav-item.secondary {
    padding-left:0;
    border:none;
  }
}

/*
** Footer
*/

footer {
  display:flex;
  justify-content: center;
  align-items: center;
  background-color:var(--green-primary);
  padding:2em 1em;
}

footer p {
  margin:0;
}

/*
**  Homepage
*/

.home .hero {
  display:flex;
  flex-direction:column;
  justify-content: center;
  position:relative;
  align-items:center;
  flex-wrap:wrap;
  background:url('img/hero_01.jpg') fixed no-repeat;
  background-size:cover;
  background-position:center 85%;
  height:70vh;
  text-align:center;
}

.home .separator {
  position:relative;
  height:160px;
  margin-top:-159px;
  margin-bottom:-1px;
}

.home .separator::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: transparent;
  clip-path: polygon(100% 0, 0 0, 0 100%);
}

.home .separator::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--blue-lighter);
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

.home .separator.reverse {
  content:'';
  width:100%;
  height:130px;
  background-color:var(--blue-primary);
  transform:skewY(10deg);
  margin:initial;
}

.home .separator.reverse::before,
.home .separator.reverse::after {
  display:none;
}

.home .separator.green {
  background-color:var(--green-primary) !important;
}

.home .separator.top {
  height:20px !important;
  margin:6em 0 0;
}

.home .hero h2 {
  margin-bottom:1em;
}

.home .hero .btn {
  margin:.5em;
}

.intro {
  background: -webkit-linear-gradient(top, var(--blue-lighter) 0%, var(--blue-primary) 100%); /* Chrome10-25,Safari5.1-6 */
  padding-top:0;
}

.intro h3 {
  color:#fff;
  text-align:right;
}

.intro h4, .intro p, .intro a {
  color:#fff;
}

.intro .steps div[class*=col-] {
  position:relative;
  padding-top:10em;
}

.intro .steps div[class*=col-]::before {
  position:absolute;
  top:-.25em;
  right:15px;
  color:rgba(255,255,255,.2);
  font-size:31rem;
  font-weight:bold;
  line-height:1;
}

.intro .steps div[class*=col-]:nth-of-type(1)::before {
  content:'1';
}

.intro .steps div[class*=col-]:nth-of-type(2)::before {
  content:'2';
}

.intro .steps div[class*=col-]:nth-of-type(3)::before {
  content:'3';
}

#services {
  background:url('img/home-light-clouds_01.jpg') no-repeat;
  background-size:cover;
  background-position:center;
}

#services .row {
  display:flex;
}

#services .row div[class*=col-] {
  padding:2em;
}

.callout {
  background: var(--blue-primary);
  background: -moz-linear-gradient(left, var(--blue-primary) 0%, var(--green-primary) 100%);
  background: -webkit-linear-gradient(left, var(--blue-primary) 0%,var(--green-primary) 100%);
  background: linear-gradient(to right, var(--blue-primary) 0%,var(--green-primary) 100%);
  text-align:center;
  padding:5em 0;
  color:#fff;
}

.callout p {
  font-size:3rem;
  font-weight:700;
  margin:0;
}

.callout p::before,
.callout p:after {
  content:'';
  display:block;
  width:100px;
  height:1px;
  margin:0 auto;
  background-color:var(--blue-lighter);
}

.callout p:before {
  margin-bottom:2em;
}

.callout p:after {
  margin-top:2em;
}

#faq {
  background:url('img/home-beach_01.jpg') no-repeat;
  background-size:cover;
  background-position:center;
}

#about-top {
  background:#0389d2 url('img/home-dark-clouds_01.jpg') no-repeat;
  background-size:100% auto;
  background-position:center bottom;
  margin-bottom:-1px;
  padding-bottom:45em;
}

#about-bottom {
  margin-top:-5em;
}

.stats {
  text-align: center;
}

.stats div[class*=col-] {
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  padding:0 4em;
  border-right:1px solid var(--gray-lighter);
}

.stats div[class*=col-]:last-of-type {
  border:none;
}

.stats .stat .number {
  display:block;
  color:var(--blue-lighter);
  font-size:6rem;
}

#contact {
  background: #1e5799;
  background: -moz-linear-gradient(top, var(--blue-primary) 0%, var(--blue-lighter) 100%);
  background: -webkit-linear-gradient(top, var(--blue-primary) 0%,var(--blue-lighter) 100%);
  background: linear-gradient(to bottom, var(--blue-primary) 0%,var(--blue-lighter) 100%);
  position:relative;
  margin-top:16vw;
}

#contact::before {
  content:'';
  display:block;
  position:absolute;
  background:url('img/separator-reverse_01.svg') no-repeat;
  background-size:cover;
  width:100%;
  height:15vw;
  top:-14vw;
  z-index:-1;
}

#contact > .container:first-child {
  margin-top:-100px;
}

.hours {
  background-color:rgba(0,0,0,.1);
  padding:1.5em;
}

@media(min-width:2300px) {
  #about-top {
    padding-bottom:55em;
  }
}

@media(max-width:1199px) {
  #about-top {
    padding-bottom:25em;
  }
}

@media(max-width:991px) {
  #about-top {
    padding-bottom:20em;
  }
}

@media(max-width:767px) {
  #about-top {
    padding-bottom:20em;
  }

  .stats div[class*=col-] {
    margin-bottom:2em;
    border:none;
  }

  #contact {
    margin-top:20vw;
  }

  #contact::before {
    height:20vw;
    top:-20vw;
  }
}

@media(max-width:575px) {
  .home .hero {
    background-position:65% top;
  }

  #about-top {
    padding-bottom:12em;
  }

  #about-bottom {
    margin-top:0;
  }

  #contact {
    margin-top:25vw;
  }

  #contact::before {
    height:25vw;
    top:-25vw;
  }
}

/*
** Forms
*/

label {
  font-size:1.4rem;
  font-weight:700;
}

.form-group {
  margin-bottom:1em;
}

.form-group.select {
  display:flex;
  min-height:41px;
}

.form-control {
  font-size:1.6rem;
  height:auto;
  padding:.5em 1em;
  border-radius:.5em;
  border:1px solid var(--gray-primary);
}

.form-check.block .form-check-input {
  margin-left:0;
}

.form-check.block .form-check-label {
  margin-left:1.5em;
}

.form-check.center {
  display:flex;
  justify-content: center;
}

.form-check.center .form-check-input {
  position:relative;
}

.form-check label {
  font-size:1.6rem;
  margin-left:.25em;
  font-weight:normal;
}

.dark-bg .form-control {
  background-color:transparent;
  border-color:#fff;
  color:#fff;
}

.dark-bg .form-control::placeholder {
  color:rgba(255,255,255,.8);
}

.form-control:focus {
  border-color:var(--green-primary);
  box-shadow:none;
}

.dark-bg .form-control:focus {
  border-color:var(--blue-primary);
}

.submit {
  margin:.5em auto;
}

textarea.form-control[readonly] {
  background-color:#fff;
}

.required {
  color:#D63B3B;
  background-color:initial !important;
  font-size:125%;
  line-height:.5;
  padding-right:.25em;
}

form .alert {
  font-size:1.4rem;
}

/*
**  Modal
*/

.modal-header {
  border-bottom:none;
}

.modal-content {
  background-color:rgb(242,242,242);
  padding:1em 1em 0;
}

.close {
  text-decoration:none;
  font-size:3rem;
}


/*
** Accordion
*/

.accordion > .card {
  margin:.5em 0;
  padding:0;
  border:1px solid var(--blue-primary);
}

.accordion > .card:first-of-type,
.accordion>.card:not(:first-of-type):not(:last-of-type) {
  border-bottom:1px solid var(--blue-primary);
}

.accordion .card-header {
  padding:0;
  border-bottom:1px solid var(--blue-primary);
}

.accordion .card-header button {
  display:flex;
  justify-content: space-between;
  align-items: center;
  color:#fff;
  background-color:var(--blue-primary);
  width:100%;
  text-align:left;
  padding:.75em 1.25em;
  text-decoration:none;
  border-radius:0;
}

.accordion .card-header .fa::before {
  font-size:2rem;
}

.accordion .card-header button .fa {
  transform:rotate(90deg);
  transition:all .3s ease-in-out;
}

.accordion .card-header button.collapsed {
  color:var(--copy-primary);
  background-color:rgba(255,255,255,.9);
}

.accordion .card-header button.collapsed .fa {
  transform:rotate(0deg);
}

.accordion .card-body {
  color:#fff;
  background-color:rgba(2,136,209,.8);
  padding:.75em 1.25em;
}

/*
**  Other Pages
*/

.main {
  min-height:76vh;
}

label .block {
  margin-bottom:1em;
}

.road-bg section > * {
  width:820px;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}

.card.narrow {
  width:600px;
  max-width:100%;
}

.card.narrow ~ .alert-secondary {
  width:540px;
  max-width:100%;
}

.attorney-hero {
  background:url('img/feature-jump_01.jpg') fixed no-repeat;
  background-size:cover;
  background-position:center;
}

.attorney-hero div[class*=col-] {
  display:flex;
  align-items:center;
}

.attorney-hero .card {
  width:100%;
  margin:0;
}

.attorney-content {
  background: var(--blue-primary);
  background: -moz-linear-gradient(top, var(--blue-primary) 0%, var(--blue-lighter) 100%);
  background: -webkit-linear-gradient(top, var(--blue-primary) 0%,var(--blue-lighter) 100%);
  background: linear-gradient(to bottom, var(--blue-primary) 0%,var(--blue-lighter) 100%);
  position:relative;
}

.attorney-content div[class*=col-] {
  margin-bottom:2em;
}

.attorney-content .card {
  margin-bottom:0;
  height:100%;
}

.attorney-content .card-body {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.attorney-content .card-body img {
  width:30%;
  min-width:70px;
}

.attorney-content .card h5 {
  color:var(--blue-lighter);
}

.tearsheets .feature-headline {
  font-size:10rem;
  line-height:1;
  color:#fff;
}

@media(max-width:767px) {
  .tearsheets {
    text-align: center;
  }
}

@media(max-width:575px) {
  .tearsheets .feature-headline {
    font-size:6rem;
  }
}