.container{
  width: 100%;
  height: 100%;
}

html, body {
background-color: white !important;
padding-top: 0;
}

body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
vertical-align: baseline;
}

/* === Grid === */
.container--flex {
width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.form-container {
max-width: 480px!important;
}

.row {
display: flex;
flex-wrap: wrap;
}

.no-gutters {
margin-right: 0;
margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
padding-right: 0;
padding-left: 0;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}

@media (min-width: 576px) {
.col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (min-width: 768px) {

.col-md-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-md-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-md-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-md-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-10 {
      flex: 0 0 83.333333%;
      max-width: 83.333333%;
    }
    .col-md-11 {
      flex: 0 0 91.666667%;
      max-width: 91.666667%;
    }
    .col-md-12 {
      flex: 0 0 100%;
      max-width: 100%;
    }
}

@media (min-width: 992px) {
.col-lg-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-lg-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-lg-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-lg-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-lg-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-lg-12 {
      flex: 0 0 100%;
      max-width: 100%;
    }
}

@media (min-width: 1200px) {
.col-xl-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}
.col-xl-3 {
  flex: 0 0 auto;
  width: 25%;
}
.col-xl-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}
.col-xl-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}
.col-xl-6 {
  flex: 0 0 auto;
  width: 50%;
}
.col-xl-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}
.col-xl-8 {
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}
.col-xl-9 {
  flex: 0 0 75%;
    max-width: 75%;
}
}

.justify-content-start {
justify-content: flex-start !important;
}

.justify-content-end {
justify-content: flex-end !important;
}

.justify-content-center {
justify-content: center !important;
}

.justify-content-between {
justify-content: space-between !important;
}

.justify-content-around {
justify-content: space-around !important;
}

.logo__container {
padding-top: 3em;
max-width: 125px;
}

h2.form__heading {
font-size: 36px;
font-weight: 800;
line-height: 44px;
margin-bottom: 12px;
color: #464646;
}

p.form__text {
font-size: 16px;
line-height: 1.65em;
font-weight: 400;
color: #5D5C5B;
}

p.form__text a {
font-weight: 500;
color: #298EE9;
transition: color 0.29s ease-in-out 0s;
}


p.form__text a:hover,
p.form__text a:focus {
color: #145FA4;
text-decoration: none;
}

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

input[type="text"].form__input--text,
input[type="password"].form__input--text,
input[type="email"].form__input--text,
input[type="tel"].form__input--text {
box-sizing : border-box;
border: 1px solid #B6B4B4;
border-radius: 2px;
font-weight: 400;
width: 100%;
background-color: white;
box-shadow: none;
height: 36px;
font-size: 14px;
padding: 0 16px;
transition: all 0.29s ease-in-out 0s;
}

input[type="text"].form__input--text:hover,
input[type="password"].form__input--text:hover,
input[type="email"].form__input--text:hover,
input[type="tel"].form__input--text:hover {
border-color: #298EE9;
}

input[type="tel"].form__input--text {
padding-left: 48px;
}

.form__input--large {
height: 48px !important;
font-size: 16px !important;
}

label.form__label {
font-size: 14px;
padding-bottom: 6px;
}

label.form__label--with-helper-text {
padding-bottom: 0;
margin-bottom: 0;
}

.form__helper-text {
font-size: 12px;
font-weight: 400;
color: #808080;
margin-bottom: 10px;
}


/* === Validation === */
.form-group__validated--error input[type="text"].form__input--text,
.form-group__validated--error input[type="password"].form__input--text,
.form-group__validated--error input[type="email"].form__input--text,
.form-group__validated--error input[type="tel"].form__input--text {
border-color: #D3423A;
}

.form__validation {
font-size: 12px;
font-weight: 900;
margin-bottom: 1em;
}

.form-group__validated--error .form__validation {
color: #B23733; 
}

.tosGroup #tosCheckbox {
margin: 0;
}

.tosGroup span {
vertical-align: middle;
padding-left: 8px;
}

/* === Buttons === */

.btn {
background-color: #e9e9e9;
color           : #464646;
padding         : 8px 24px;
font-size       : 14px;
font-weight     : 700;
letter-spacing  : .5px;
text-shadow     : none;
border          : none;
cursor          : pointer;
border-radius   : 2px;
text-align      : center;
transition: all 0.29s ease-in-out 0s;
box-shadow      : 0px 3px 15px 1px rgba(0, 0, 0, 0.08);
background-image: none;
}

.btn:hover, .btn:focus {
background-color: #5d5c5b;
color: white;
text-decoration: none;
}

.btn:focus {
  outline:        1px dotted white;
  outline-offset: -4px;
}

.btn:active {
background-color: #464646 !important;
color: white;
}

.btn--red {
background-color: #D3423A;
color: white;
}

.btn--red:hover {
background-color: #b23733;
color: white;
}

.btn--red[disabled] {
background-color: #e9e9e9;
color: #9C9797;
cursor: not-allowed;
transition: none;
opacity: 75%;
}

.btn--red[disabled]:hover {
background-color: #e9e9e9;
color: #9C9797;
}

.btn--inverse {
background-color: rgba(255,255,255,.25);
color: white;
}

.btn--full-width, input[type="submit"].btn--full-width {
width: 100%;
}

.btn-lg{
height: 48px;
}

.btn__link {
color: #298EE9;
font-weight: 600;
transition: color 0.29s ease-in-out 0s;
}

.btn__link:hover,
.btn__link:focus {
color: #145FA4;
text-decoration: none;
}

/* === Utilities === */

.mb-0 {
margin-bottom: 0 !important;
}

.mb-1 {
margin-bottom: 0.25rem !important;
}

.mb-2 {
margin-bottom: 0.5rem !important;
}

.mb-3 {
margin-bottom: 1rem !important;
}

.mb-4 {
margin-bottom: 1.5rem !important;
}

.mb-5 {
margin-bottom: 3rem !important;
}

.pt-0 {
padding-top: 0 !important;
}

.pt-1 {
padding-top: 0.25rem !important;
}

.pt-2 {
padding-top: 0.5rem !important;
}

.pt-3 {
padding-top: 1rem !important;
}

.pt-4 {
padding-top: 1.5rem !important;
}

.pt-5 {
padding-top: 3rem !important;
}

.pb-0 {
padding-bottom: 0 !important;
}

.pb-1 {
padding-bottom: 0.25rem !important;
}

.pb-2 {
padding-bottom: 0.5rem !important;
}

.pb-3 {
padding-bottom: 1rem !important;
}

.pb-4 {
padding-bottom: 1.5rem !important;
}

.pb-5 {
padding-bottom: 3rem !important;
}

.pl-0 {
padding-left: 0 !important;
}

.pl-1 {
padding-left: 0.25rem !important;
}

.pl-2 {
padding-left: 0.5rem !important;
}

.pl-3 {
padding-left: 1rem !important;
}

.pl-4 {
padding-left: 1.5rem !important;
}

.pl-5 {
padding-left: 3rem !important;
}

.pl-75px {
padding-left: 75px;
}

.float-left {
float: left !important;
}

.float-right {
float: right !important;
}

.mx-width--50 {
max-width: 50px;
}

.text__font-size--14 {
font-size: 14px !important;
}

.d-none {
display: none;
}

/* === Clearfix === */
.group:after {
content: "";
display: table;
clear: both;
}

/* === Billboard === */
.billboard__wrapper {
height: 100vh;
position: fixed;
right: 0;
min-height: auto;
padding-top: 4em;
}

@media (min-width: 992px) and (max-width: 1200px) {
.billboard__wrapper {
overflow-y: scroll;
padding-bottom: 8em;
}
}

@media (max-width: 991px) {
.billboard__wrapper {
  display: none !important;
}
}

/* === Option Panels === */

legend.option-question {
color: #464646;
font-weight: 900;
font-size: 24px;
border-bottom: none;
margin-bottom: 0;
}

label.panel__option-label {
display: flex;
border: 2px solid #D9D9D9;
background-color: white;
padding: 1.25em;
border-radius: 4px; 
background-color: white;
transition: all 0.29s ease-in-out 0s;
}

label.panel__option-label:hover, 
label.panel__option-label:focus, 
label.panel__option-label:active {
border-color: #808080;
}

.option-label__img {
}

.option-label__text-container {
align-self: center;
padding-left: 1.5em;
}

.option-label__heading {
display: block;
font-size: 16px;
color: #808080;
font-weight: 900;
margin-bottom: 4px;
transition: color 0.29s ease-in-out 0s;
}

label.panel__option-label:hover .option-label__heading {
color:  #464646;
}

.option-label__description {
display: block;
font-size: 14px;
font-weight: 400;
margin-bottom: 0;
color: #5D5C5B;
}

input[type="radio"] {
opacity: 0;
width: 0;
height: 0;
}

input[type="radio"]:checked ~ label.panel__option-label {
border-color: #D3423A;
box-shadow      : 0px 3px 15px 1px rgba(0, 0, 0, 0.08);

}


input[type="radio"]:checked ~ label.panel__option-label .option-label__heading {
color:  #D3423A;
}

/* === Background === */
.background--waves {
position: fixed;
bottom: 0;
background-image: url("https://www.thehoth.com/images/backgrounds/background--waves.svg");
height: 500px;
width: 100%;
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}


/* === Promo Notification === */

.panel__border {
border-radius: 4px;
background-color: #0A477F;
padding: 2em;
margin-bottom: 2em;
position: relative;
}

.panel__border--shadow {
box-shadow: 0px 3px 15px 1px rgba(0, 0, 0, 0.02);
}

.panel__heading {
font-size: 16px;
color: white;
line-height: 1.5em;
font-weight: 800;

}

@media (min-width: 992px) {
.panel__heading {
  min-height: inherit;
}
}

@media (min-width: 1200px) {
.panel__heading {
  min-height: 50px;
}
}

.panel__description {
font-size: 14px;
font-weight: 400;
line-height: 1.5em;
color: white;
margin-bottom: 0;
}


@media (min-width: 992px) {
.panel__description-min-height {
  min-height: inherit;
  margin-bottom: 2em;
}
}

@media (min-width: 1200px) {
.panel__description-min-height {
  min-height: 175px;
}
}

.panel__description a {
color: white;
text-decoration: underline;
opacity: 1;
transition: opacity 0.29s ease-in-out 0s;
}

.panel__description a:hover, 
.panel__description a:focus {
opacity: .75;
}

/* === Reviews === */

.review__container {
position: relative;
color: white;
align-self: center;
}

.review__container::before {
content: url("https://www.thehoth.com/images/img__stars--top-left.svg");
position: absolute;
top: -36px;
left: -50px;
height: 66px;
width: 120px;
}

.review__container::after {
content: url("https://www.thehoth.com/images/img__stars--bottom-right.svg");
position: absolute;
bottom: -40px;
right: -70px;
height: 66px;
width: 120px;
}

.review__stars-container {
display: block;
border-bottom: 2px solid white;
padding-bottom: 12px;
margin-bottom: 12px;
}

.review__quote {
font-size: 22px;
font-weight: 300;
line-height: 1.5em;
margin-bottom: 24px;
}

.review__reviewee {
font-size: 18px;
font-weight: 900;
margin-bottom: 4px;
}

.review__role {
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 900;
color: rgba(255,255,255,.65);
}

.review__sa-logo {
position: absolute;
right: 0;
bottom: 0;
width: 75px;
}

.promobar {
display: none;
background-color: #0a477f;
z-index: 9999;
position: absolute;
left: 0;
top: 0;
width: 100%;
color: white;
text-align: center;

}

.promobar a {
display: block;
padding: 1em;
height: 100%;
width: 100%;
text-decoration: none;
color: white;
}

@media (max-width: 991px) {
.promobar {
  display: block;
}
}


.star__container {
position: relative;
color: white;
align-self: center;
}

.star__container::before {
content: url("https://www.thehoth.com/images/img__stars--top-left.svg");
position: absolute;
top: -36px;
left: -50px;
height: 66px;
width: 120px;
}

.star__container::after {
content: url("https://www.thehoth.com/images/img__stars--bottom-right.svg");
position: absolute;
bottom: -40px;
right: -70px;
height: 66px;
width: 120px;
}