/*
 Description:    Custom Styles for affordable-healthcare-plans.com
 Author:         Chris Ruby
 Version:        1.0.0
*/


/* ------ Color Variables ------- */
:root { 
  --colorBlack: 68,68,68;
  --colorPrimary: 44,95,171;
  --colorSecondary: 18,64,132;
  --colorTertiary: 48,221,125;
  --alpha: .3;
  --primaryFont: 'Montserrat', sans-serif;
}

.bg-primary   { background-color: rgb(var(--colorPrimary))!important; }
.bg-secondary { background-color: rgb(var(--colorSecondary))!important; }
.bg-tertiary  { background-color: rgb(var(--colorTertiary))!important; }
.bg-black     { background-color: rgb(var(--colorBlack))!important; }
.bg-gray      { background-color: #CBCBCB; }
.bg-ltgray    { background-color: #EEEEEE; }

.text-primary   { color: rgb(var(--colorPrimary))!important; }
.text-secondary { color: rgb(var(--colorSecondary))!important; }
.text-tertiary  { color: rgb(var(--colorTertiary))!important; }
.text-black     { color: rgb(var(--colorBlack))!important; }
.text-gray      { color: #CBCBCB!important; }
.text-muted     { color: #777!important; }


/* ------ Basic Styling ------- */
* 				      { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /*outline: 1px solid red;*/ }
html, body  	  { background: #FFF; margin: 0; padding: 0; position: relative; }
body       		  { background: #FFF; color: rgb(var(--colorBlack)); font-family: var(--primaryFont); font-weight: 400; font-size: 16px; line-height: 1.5; min-height: 100vh; }                

.hide-text      { text-indent: 100%; white-space: nowrap; overflow: hidden; }
.caps,
.uppercase      { text-transform: uppercase; }
.sentence-case  { text-transform: capitalize; }
.lowercase      { text-transform: lowercase; }

a    				    { color: rgb(var(--colorPrimary)); text-decoration: none !important; }
a:hover,
a:active 		    { color: rgb(var(--colorSecondary)); text-decoration: none !important; }

textarea:focus,
input:focus     { outline: none; }

h1, h2, h3,
h4, h5, h6      { font-style: normal; font-weight: 700; line-height: 1.2; text-align: center; }
h1              { font-size: 1.6rem; }
h2              { font-size: 1.5rem; }
h2.branded      { color: rgb(var(--colorPrimary)); font-weight: 400; }
h3              { font-size: 1.3rem; }
h4              { font-size: 1.1rem; }
h5              { font-size: 1.125rem; }
h6              { font-size: 1rem; }
p               { font-size: 1.125rem; margin-bottom: 1.250rem; }
p.small         { font-size: 0.9em; line-height: 1.5; }
p.xsmall        { font-size: 0.7em; line-height: 1.5; }
.em1            { font-size: 1rem; }

ol li, ul li    { font-size: 1.125rem; margin-bottom: 0.250rem; }

.normal         { font-weight: 400; }
.bold,
b, strong       { font-weight: 700; }
.bolder         { font-weight: 900; }
.sup            { vertical-align: top; }

.close          { color: #000; font-size: 2.5rem; font-weight: 500; }
.close:active,
.close:focus    { outline: none; }

.shadow-none    { box-shadow: none!important; }
.shadow         { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; }
.shadow-sm      { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; }
.shadow-lg      { box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important; }
.shadow-xl      { box-shadow: 0 0 30px rgba(0, 0, 0, .18)!important; }

.border-lg      { border: 2px solid rgb(var(--colorPrimary)); }
.rounded        { border-radius: 10px!important; }

.container-thin { max-width: 900px; }

.opacity9 { opacity: .9; }
.opacity8 { opacity: .8; }
.opacity7 { opacity: .7; }
.opacity6 { opacity: .6; }
.opacity5 { opacity: .5; }
.opacity4 { opacity: .4; }
.opacity3 { opacity: .3; }
.opacity2 { opacity: .2; }
.opacity1 { opacity: .1; }

.hr-white { border-color: #FFF !important; }

/* -------- Gradient Styling ------- */
.bg-gradient-dkblue {
    background: rgb(var(--colorPrimary));
    background: radial-gradient(ellipse at center,#3a5fa7 0%,#263f6e 100%);
}
.bg-gradient-ltblue {
    background: #1976D2;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…BoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-radial-gradient(center,ellipse cover,#1976D2 0%,#0D47A1 100%);
    background: -webkit-radial-gradient(center,ellipse cover,#1976D2 0%,#0D47A1 100%);
    background: -o-radial-gradient(center,ellipse cover,#1976D2 0%,#0D47A1 100%);
    background: -ms-radial-gradient(center,ellipse cover,#1976D2 0%,#0D47A1 100%);
    background: radial-gradient(ellipse at center,#1976D2 0%,#0D47A1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1976D2',endColorstr='#0D47A1',GradientType=1 );
}
.bg-gradient h2 { font-size: 2.250rem; font-weight: 400; padding-bottom: 4px; text-shadow: 0 0px 6px rgba(0, 0, 0, 0.3); }


/* -------- Button Styling -------- */
.btn {
  background: #32DD7C;
  border: none;
  border-radius: 100px;
  color: #FFF;
  cursor: pointer;
  padding: 25px 40px;
  display: inline-block;
  text-transform: uppercase;
  font-weight: 700;
  outline: none;
  position: relative;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.btn,
.btn:hover,
.btn:active {
  transition-duration: 0.2s, 0.15s;
  transition-timing-function: ease-in-out, ease-in-out;
  transition-delay: 0s, 0s;
  transition-property: all, transform;
  position: relative;
  font-size: 20px;
  text-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px;
  color: rgb(255, 255, 255) !important;
  outline-color: initial !important;
  outline-style: initial !important;
  outline-width: 0px !important;
}

.btn,
.btn:active:not(:hover) {
  box-shadow: rgb(29, 171, 105) 0px 8px, rgba(0, 0, 0, 0.25) 0px 3px 10px -10px inset, rgba(29, 171, 105, 0.5) 0px 0px 0px 2px inset;
}

.btn:hover {
  box-shadow: rgb(29, 171, 105) 0px 0px, rgba(0, 0, 0, 0.25) 0px 3px 10px -10px inset, rgba(29, 171, 105, 0.5) 0px 0px 0px 2px inset;
  top: 0px;
}

.btn:hover:active {
  box-shadow: rgb(29, 171, 105) 0px 0px, rgba(0, 0, 0, 0.25) 0px 3px 10px 0px inset, rgba(29, 171, 105, 0.5) 0px 0px 0px 2px inset;
  top: 0px;
  transform: scale(0.97);
}

.btn-xl { padding: 25px 20px; font-size: 1.5em !important; max-width: 270px; width: 100%; }
.btn-lg { padding: 25px 20px; font-size: 1.35em !important; max-width: 270px; width: 100%; }

/* ------- Header Styling ------- */
#header h6 { font-size: .6rem; }

/* ------- Banner Styling ------- */
#banner { background: rgb(var(--colorSecondary)); color: #fff; display: block; font-size: 1.125rem; margin: 0 0 -1px; padding: 10px 15px; position: relative; text-align: center; }

/* ------- Hero Styling ------- */
#hero {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/_img/hero-bg.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: rgba(0,0,0,.75) 0 50px 100px -50px inset, rgba(0,0,0,.75) 0 -50px 100px -50px inset;
  color: #FFF;
  height: calc(100% - 178px - 5.5em);
  margin: 0;
  overflow: auto;
  min-height: 485px;
  text-align: center;
  width: 100%;
}
#hero h4.sub-head { font-size: 1.313rem; font-weight: 700; }
#hero #zip-form .form-group { border: 2px solid #fff; border-radius: 17px; display: block; margin: 0 auto; max-width: 700px; padding: 10px; width: 85%; }
.zip { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 15px; color: #999; font-size: 1rem; border: none; border-radius: 6px; max-width: 522px; outline: none; padding: 1.125rem 1.0rem; text-align: center; width: calc(100% - 40px); }
.zip:valid { color: #32DD7C; }
#secure-badge { position: absolute; margin-left: 10px; max-width: 1.7rem; top: 30px; }

/* _------ Quote Form Styling ------- */
form label { color: rgb(85, 85, 85); font-size: 1rem; font-weight: 700 !important; line-height: 36px; }
.has-error .form-control { border-color: #e53935; }
.has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline, .has-error.radio label, .has-error.checkbox label, .has-error.radio-inline label, .has-error.checkbox-inline label { color: #e53935; }
.help-block { bottom: 0; color: #e53935; display: block; font-size: 11px; font-weight: 700; margin-bottom: -17px; position: absolute; white-space: nowrap; }
.form-control::-webkit-input-placeholder { color: #999999 !important; font-weight: 400 !important; }
.form-control::-moz-placeholder { color: #999999 !important; font-weight: 400 !important; }
.form-control:-ms-input-placeholder { color: #999999 !important; font-weight: 400 !important; }
.form-control:-moz-placeholder { color: #999999 !important; font-weight: 400 !important; }
form select:invalid { color: #999999 !important; font-weight: 400 !important; }
.form-control:focus::-webkit-input-placeholder { color: #EEE !important; font-weight: 400 !important; }
.form-control:focus::-moz-placeholder { color: #EEE !important; font-weight: 400 !important; }
.form-control:focus:-ms-input-placeholder { color: #EEE !important; font-weight: 400 !important; }
.form-control:focus:-moz-placeholder { color: #EEE !important; font-weight: 400 !important; }

/* ------- Modal Styling ------ */
.modal-full { min-width: 100%; margin: 0; }
.modal-full .modal-content { background-color: rgba(255,255,255,.75); min-height: 100vh; }
.modal-close-button { background: rgb(var(--colorBlack)); border: 2px solid; border-radius: 50px; color: #FFF; cursor: pointer; font-size: 20px; height: 40px; position: absolute; right: -15px; top: -15px; width: 40px; z-index: 999; }
.modal-close-button:focus, .modal-close-button:active { outline-style: none; transform: scale(.9); }
.modal-close-button > .fas { height: 40px; line-height: 35px; width: 36px; }

/* ------- Save Money Styling ------- */
#save-money ol { counter-reset: any; list-style: none; padding-left: 75px; }
#save-money ol li { counter-increment: any; font-size: 1.125rem; margin-bottom: 40px; padding-top: 7px; position: relative; }
#save-money ol li::before { background: rgb(var(--colorPrimary)); border-radius: 50%; color: #fff; content: counter(any); font-size: 1.6rem; font-weight: 700; height: 45px; left: calc(-1 * 45px - 10px); line-height: 45px; position: absolute; text-align: center; top: 0; width: 45px; }

/* ------- Shopping Section - BRANDED ------- */
#shopping h2 { font-size: 1.75rem; font-weight: 700; letter-spacing: 0.5px; }

/* ------- CTA Section - BRANDED ------- */
.cta-form-input input.zip-cta { border: 1px solid #3a5fa7; border-radius: 15px; color: #999; display: inline-block; float: none; font-size: 1.125rem; height: 80px; margin: 0 auto; max-width: 100%; outline: none; padding: 8px 6px; text-align: center; width: 400px; }

/* ------- Last Call Popup -------*/
#last-call { background: rgba(18,53,73,.95); color: #FFF; display: flex; height: 100vh; position: fixed; top: -100vh; transition: all 0.75s ease-in-out; width: 100vw; z-index: 999; }
#last-call.dont-leave { top: 0; transition: all 0.75s ease-in-out; }
#last-call.dont-leave.closed { top: -100vh; transition: all 0.75s ease; }
#last-call .close-btn { color: #FFF; cursor: pointer; font-size: 2rem; position: absolute; right: 2.5rem; top: 2rem; z-index: 9999; }
#last-call .container { display: flex; }
#last-call .container .col { display: flex; flex-direction: column; align-items: center; justify-content: center; }
#last-call .container .col h1 { font-size: 3rem; font-weight: bold; margin-bottom: 3rem; }
#last-call .container .col h2 { font-weight: bold; margin-bottom: 3rem; }
#last-call .container .col p.phone-number { color: #71d587; font-size: 3.25rem; font-weight: bold; margin-bottom: 3rem; text-shadow: 0px 0px 20px rgba(0,0,0,0.4); }
#last-call .container .col ul { max-width: 60%; }
#last-call .container .col ul li { font-weight: bold; margin-bottom: 1rem; }

/* ------- Form Styling ------- */
img[src*="secure-lock.png"] { display: inline-block; position: absolute; right: calc(-15px - 2vw); top: calc(0px + 0.2vw); vertical-align: middle; width: calc(36px + 1vw); }

/* ------- Footer Styling ------- */
#footer { font-size: .95rem; line-height: 1.15; }
.footer-text { max-width: 100%; }

/* ------ Small devices ------- */
@media (min-width: 576px) {}

/* ------ Medium devices ------- */
@media (min-width: 768px) { 
  h1, h2, h3,
  h4, h5, h6      { font-style: normal; line-height: 1.2; text-align: center; }
  h1              { font-size: 2.188rem; font-weight: 700; }
  h2              { font-size: 2rem; }
  h3              { font-size: 1.6rem; }
  h4              { font-size: 1.375rem; }
  h5              { font-size: 1.125rem; }
  h6              { font-size: 1rem; }
  #header h6 { font-size: inherit; }
  .aff-bar-icons h2 { font-size: 2rem; }
  .zip { font-size: 1.715em; }
  .cta-form-input input.zip-cta { font-size: 1.5rem; }
  #save-money ol li { font-size: 1.5rem; }
  #save-money ol li::before { font-size: 2.125rem; left: calc(-1 * 54px - 10px); line-height: 54px; height: 54px; width: 54px; }  
  .w-md-100 { width: 100%!important; }
  .footer-text { max-width: 65%; }
}

/* ------ Large devices ------- */
@media (min-width: 992px) {
  .btn-xl { font-size: 1.750em !important; padding: 30px 20px; max-width: 350px; width: 100%; }
  .help-block { font-size: 14px; margin-bottom: -19px; }
  .form-control { height: 2.5rem; }
  form select:invalid { font-size: 1rem !important; }
  form input, form select:valid, form textarea { color: #495057; font-size: 1rem; }
  #get-info .padding-right { border-left: 1px solid #eee; }
  #get-info .padding-left .row { padding-right: 40px; }
  #secure-badge { max-width: 2.5rem; top: 25px; }
  .zip { padding-left: 4.5rem; }
  .w-lg-100 { width: 100%!important; }
}

/* ------ Extra large ------- */
@media (min-width: 1200px) {
  .w-xl-100 { width: 100%!important; }
 }
@media (min-width: 1400px) {
  .container-xl-wide { max-width: 1400px !important; }
 }