/*
 Description:    Custom Styles for Nations Health Group
 Author:         Chris Ruby
 Version:        1.0.0
*/


/* ------ Color Variables ------- */
:root { 
  --colorBlack: 68,68,68;
  --colorPrimary: 30,81,147;
  --colorSecondary: 74,117,174;
  --colorTertiary: 245,248,251;
  --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: #DEDEDE; }
.bg-dkgray    { background-color: #6C757D; }

.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; }
.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; counter-reset: section; }                

.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: 600; line-height: 1.2; text-align: center; }
h1              { font-size: 1.5rem; font-weight: 700; }
h2              { font-size: 1.4rem; font-weight: 700; }
h3              { font-size: 1.3rem; }
h4              { font-size: 1.2rem; }
h5              { font-size: 1.125rem; }
h6              { font-size: 1rem; }
p               { font-size: 1rem; margin-bottom: 1.250rem; }
p.small         { font-size: 0.9rem; line-height: 1.5; }
p.xsmall         { font-size: 0.75rem; line-height: 1.3; }

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

.normal         { font-weight: 400; }
.bold,
b, strong       { font-weight: 600; }
.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; }

.offcanvas-header{ display:none; }

/* -------- Gradient Styling ------- */
.bg-gradient-dkblue {
    background: #274f72;
    background: -moz-radial-gradient(center,ellipse cover,#007399 0%,#003449 100%);
    background: -webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,#007399),color-stop(100%,#003449));
    background: -webkit-radial-gradient(center,ellipse cover,#007399 0%,#003449 100%);
    background: -o-radial-gradient(center,ellipse cover,#007399 0%,#003449 100%);
    background: -ms-radial-gradient(center,ellipse cover,#007399 0%,#003449 100%);
    background: radial-gradient(ellipse at center,#007399 0%,#003449 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#007399',endColorstr='#003449',GradientType=1);
}
.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-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#1976D2), color-stop(100%,#0D47A1));
    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); }

.bg-confetti {
    background: #53aef6;
    background: linear-gradient(to top,rgba(83,174,246,0.5),rgba(63,81,181,0.5)),url(../_img/confetti.svg),linear-gradient(to top,#53aef6,#3f51b5);
    background-size: cover,600px auto,cover;
}

/* -------- Button Styling -------- */
.btn { background: #32DD7C; border: none; border-radius: 100px; color: #FFF; cursor: pointer; padding: 25px 60px; display: inline-block; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; outline: none; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; transform: scale(.8); }
.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; top: -8px; 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%; }

.btn-landing { background: #ED1C24; border: 2px solid #FFF; border-radius: 8px; box-shadow: none; font-size: 1.5rem; font-weight: 400; letter-spacing: 0; max-width: 280px; padding: 10px 20px; text-shadow: none; width: 100%; }
.btn-landing:hover,
.btn-landing:active { background: rgb(var(--colorSecondary)); box-shadow: none; top: 0; }

.btn-compare { display: inline-block; position: absolute; bottom: 0; left: 50%; margin: 25px auto 0; padding: 15px 40px; background: #2e9cf3; border: none; border-radius: 100px; box-shadow: 0 20px 40px -20px rgba(63,81,181,.5); font-family: nexa bold,helvetica neue,sans-serif; font-size: calc(20px + 1vw); font-weight: 900; text-align: center; letter-spacing: 1px; white-space: nowrap; color: #fff; -ms-transform: scale(1,1) translate(-50%,50%); -webkit-transform: scale(1,1) translate(-50%,50%); transform: scale(1,1) translate(-50%,50%); -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; z-index: 1; }
.btn-compare:hover { color: #FFFFFF;  -ms-transform: scale(1.1,1.1) translate(-45.455%,45.455%); -webkit-transform: scale(1.1,1.1) translate(-45.455%,45.455%); transform: scale(1.1,1.1) translate(-45.455%,45.455%); box-shadow: 0 20px 50px -5px rgba(68,80,151,0.4); }

.btn-get-started { padding: 15px 40px; background: #2e9cf3; border: none; border-radius: 100px; box-shadow: 0 20px 40px -20px rgba(63,81,181,.5); font-family: nexa bold,helvetica neue,sans-serif; font-size: calc(20px + 1vw); font-weight: 900; text-align: center; letter-spacing: 1px; white-space: nowrap; color: #fff; -ms-transform: scale(1,1) translate(-50%,50%); -webkit-transform: scale(1,1) translate(-50%,50%); transform: scale(1,1) translate(-50%,50%); -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; z-index: 1; }
.btn-get-started:hover { color: #FFFFFF;  -ms-transform: scale(1.1,1.1) translate(-45.455%,45.455%); -webkit-transform: scale(1.1,1.1) translate(-45.455%,45.455%); transform: scale(1.1,1.1) translate(-45.455%,45.455%); box-shadow: 0 20px 50px -5px rgba(68,80,151,0.4); }

.btn-steps { background: transparent; border: 2px solid #2e9cf3; border-radius: 100px; color: #2e9cf3; display: inline-block; font-family: nexa bold,helvetica neue,sans-serif; font-size: 20px; font-weight: 900; letter-spacing: 1px; padding: 10px 28px 10px; text-align: center; -ms-transform: scale(1,1); -webkit-transform: scale(1,1); -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; transform: scale(1,1); white-space: nowrap; }
.btn-steps:hover { background: rgba(46,156,243,1); box-shadow: 0 20px 45px -5px rgba(68,80,151,0.35); color: #fff; -ms-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); }

.btn.btn-link { background: none; border: none; box-shadow: none; color: rgb(var(--colorblack))!important; font-size: 1.3rem; letter-spacing: normal; padding: 0; text-shadow: none; text-transform: inherit; top: 0; width: 100%; }
.btn.btn-link:hover { color: rgb(var(--colorPrimary))!important; transform: none; text-decoration: none; }

.btn.btn-close,.btn.btn-close:active:not(:hover) { background: #EEE; box-shadow: none; color: #333!important; height: 42px; line-height: 0; padding: 0; width: 42px; }
.btn.btn-close:hover, 
.btn.btn-close:hover:active { background: #FFF; box-shadow: none; }

/* ------- Nav Styling ------- */
.navbar-brand img { max-width: 250px; }
.navbar-light .navbar-nav .nav-link { color: rgb(var(--colorPrimary)); }
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link { color: rgb(var(--colorSecondary)); }

/* ------- Banner Styling ------ */
#banner h4 { font-size: 1rem; }

/* ------- Hero Styling ------- */
#hero { background: url(../_img/hero-bg-mobile.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; /*min-height: calc(100vh - 80px);*/ }
#hero .bg-gray { background: rgba(0,0,0,0); }
#hero.solid { background: radial-gradient(rgba(0, 0, 0,0.25), rgba(0, 0, 0, 0.5)); background-color: rgb(var(--colorPrimary)); }
#hero h4.sub-head { font-size: 1rem; }
.form-right #hero { transform: scaleX(-1); }
.form-right #hero .container { transform: scaleX(-1); }
.zipcode { -webkit-appearance: none; -moz-appearance: none; appearance: none; color: #999; font-size: 1.750em; border: 5px solid #FFFFFF; border-radius: 6px; padding: 1.125rem 1.0rem; text-align: center; width: 84%; }
#zip::-webkit-outer-spin-button,
#zip::-webkit-inner-spin-button       { -webkit-appearance: none; }
#zip::-webkit-input-placeholder       { color:rgba(176,190,197,1); position: relative; }
#zip::-moz-placeholder                { color:rgba(176,190,197,1); position: relative; }
#zip:-ms-input-placeholder            { color:rgba(176,190,197,1); position: relative; }
#zip:-moz-placeholder                 { color:rgba(176,190,197,1); position: relative; }
#zip:focus::-webkit-input-placeholder { color:rgba(176,190,197,0); }
#zip:focus::-moz-placeholder          { color:rgba(176,190,197,0); }
#zip:focus:-ms-input-placeholder      { color:rgba(176,190,197,0); }
#zip:focus:-moz-placeholder           { color:rgba(176,190,197,0); }
#secure-badge { position: absolute; margin-left: 10px; max-width: 1.7rem; top: 30px; }
#hero .logos { bottom: 0; opacity: .7; }
#hero .disclaimers { color: #FFFFFF; }

/* ------- Aff Bar Styling ------- */
.aff-bar-icons h2 { color: rgb(var(--colorSecondary)); font-size: 1rem; font-weight: 700; text-shadow: 2px 2px 3px rgba(100,100,100,0.2); text-transform: capitalize; }

/* ------- Footer Styling ------- */
#footer { font-size: .95rem; line-height: 1.15; }

/* ------- Steps Styling ------- */
#step-boxes>[class*=col-]:before { background: #3f51b5; border-radius: 100px; color: #fff; content: counter(section); counter-increment: section; display: inline-block; font-weight: 900; font-size: 28px; height: 50px; left: 50%; line-height: 0; padding-top: 24px; position: absolute; top: -25px; text-align: center; transform: translateX(-50%); vertical-align: middle; width: 50px; }
.step-box { border-radius: 10px; border: 2px dashed rgb(var(--colorSecondary)); }
#step-boxes .exam:before { content: "\f0f0"; font-family: "Font Awesome 5 Free"; font-weight: 900; }
#step-boxes .gym:before { content: "\f44b"; font-family: "Font Awesome 5 Free"; font-weight: 900; }
#step-boxes .otc:before { content: "\f4d3"; font-family: "Font Awesome 5 Free"; font-weight: 900; }
#step-boxes .copay:before { content: "\f0f8"; font-family: "Font Awesome 5 Free"; font-weight: 900; }
#step-boxes .copay-prescription:before { content: "\f484"; font-family: "Font Awesome 5 Free"; font-weight: 900; }
#step-boxes .visits:before { content: "\f108"; font-family: "Font Awesome 5 Free"; font-weight: 900; }
#step-boxes .plana:before { content: "A"; }
#step-boxes .planb:before { content: "B"; }
#step-boxes .planc:before { content: "C"; }
#step-boxes .pland:before { content: "D"; }

/* ------ Quote Form Styling ------- */
form label { color: rgb(85, 85, 85); font-size: .9rem; 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.old { color: #e53935; display: block!important; }
.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; }
.input-wrapper { transform: scale(.8); }

/* ------- 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-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 > .fas { height: 40px; line-height: 40px; width: 41px; }

/* ------- Card Collapse ------- */
.card-header .fa { transition: .3s transform ease-in-out; }
.card-header .collapsed .fa { transform: rotate(90deg); }

.panel-default>.panel-heading:not(.collapsed):before, .panel-default>.panel-heading:not(.collapsed):after {
    transform: translateY(-50%) rotateX(180deg);
    color: #78909c;
}
.panel-default>.panel-heading:before {
    left: 15px;
}

.panel-default>.panel-heading:before, .panel-default>.panel-heading:after {
    content: "\f107";
    font-family: fontawesome;
    font-size: 18px;
    color: #a0b1ba;
    position: absolute;
    display: inline-block;
    line-height: 0;
    top: 50%;
    transform: translateY(-50%) rotateX(0deg);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

#callModal .modal-content { background: url(../_img/bg-modal.jpg) no-repeat scroll top center rgb(0,0,0,0); background-size: cover; }
#callModal .xmark-1, #callModal .xmark-2 { stroke: rgb(var(--colorSecondary)); stroke-width: 3px; }
#formModal .modal-content { background: url(../_img/bg-modal-form.jpg) no-repeat scroll top center rgb(0,0,0,0); background-size: cover; }
#formModal .xmark-1, #formModal .xmark-2 { stroke: rgb(var(--colorSecondary)); stroke-width: 3px; }
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  #callModal.modal, #formModal.modal {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.6);
  }
}
#footer-sticky .svg-wrapper { height: 28px; width: 28px; }
#footer-sticky .svg-wrapper svg.icon-phone { height: 28px; width: 28px; vertical-align: sub; }

/* ------- Landing Page Styling ------- */

@keyframes bodyFadeIn{ 0% { opacity:0; } 50% { opacity: 0; } 100% { opacity:1; } }
@-moz-keyframes bodyFadeIn { 0% { opacity:0; } 50% { opacity: 0; } 100% { opacity:1; } }
@-webkit-keyframes bodyFadeIn { 0% { opacity:0; } 50% { opacity: 0; } 100% { opacity:1; } }
@-o-keyframes bodyFadeIn { 0% { opacity:0; } 50% { opacity: 0; } 100% { opacity:1; } }
@-ms-keyframes bodyFadeIn { 0% { opacity:0; } 50% { opacity: 0; } 100% { opacity:1; } }

/* ------- Small devices ------- */
@media (min-width: 576px) {
  .navbar-brand img { max-width: 300px; }
  h2 { font-weight: 400; }
  form label { font-size: 1rem; }
}

/* ------- 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.25rem; font-weight: 700; }
  h2              { font-size: 2rem; }
  h3              { font-size: 1.4rem; }
  h4              { font-size: 1.375rem; }
  h5              { font-size: 1.125rem; }
  h6              { font-size: 1rem; }
  #banner h4      { font-size: inherit; }
  .btn            { transform: scale(1); }
  .input-wrapper  { transform: scale(1); }
  /* ------- Landing Page Styling ------- */
  .landing-two-column h1 { font-size: 2.25rem; }
  .landing-two-column input { font-size: 1.125rem; height: auto; line-height: 1; padding: 15px; }
}

/* ------- Large devices ------- */
@media (min-width: 992px) {
  #hero {  background: url(../_img/hero-bg.jpg); background-repeat: no-repeat; background-position: center 23%; background-size: cover; }
  #hero .bg-gray { background-color: #DEDEDE; }
  #hero .disclaimers { color: #999; }
  .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: 1.1em !important; }
  form input, form select:valid, form textarea { color: rgb(0, 0, 0); font-size: 1.1em; font-weight: 700 !important; }
  #get-info .padding-right { border-left: 1px solid #eee; }
  #get-info .padding-left .row { padding-right: 40px; }
  #secure-badge { max-width: 2.5rem; top: 18px; }
  /* ------- Landing Page Styling ------- */
  .landing-two-column .bg-doctor { background-image: url('/_img/doctor-gesture-1.jpg'); background-position: center bottom; background-size: cover; background-repeat: no-repeat; }
  .landing-two-column .bg-doctor.woman { background-image: url('/_img/doctor-gesture.jpg'); }
  .landing-gradiated-doctors h1 { font-size: 2.25rem; }
  .modal-dialog { max-width: 778px; margin: 1.75rem auto; }
}

/* ------ Extra large ------- */
@media (min-width: 1200px) {
  h1.contact-headline { font-size: 3.25rem; }
  /* ------- Landing Page Styling ------- */
  #hero-landing-gradient {
    background: rgb(2,204,188);
    background: -moz-linear-gradient(90deg, rgba(2,204,188,1) 0%, rgba(2,204,188,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(2,204,188,1) 0%, rgba(2,204,188,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    background: linear-gradient(90deg, rgba(2,204,188,1) 0%, rgba(2,204,188,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#02ccbc",endColorstr="#ffffff",GradientType=1);
  }
 }

/* ------- XX Wide ------- */
@media (min-width: 1600px) {
  .navbar-brand img { max-width: 100%; }
  .container-wide { max-width: 1600px; }
}

@media (max-width: 1024px) {
  /* ------- Nav Styling ------- */
  .offcanvas-header{ display:block; }
  .navbar-collapse { background-color: rgba(var(--colorPrimary),.9)!important; bottom: 0; left: 100%; overflow-y: auto; padding-right: 1rem; padding-left: 1rem; position: fixed; top:0;  transition: visibility .2s ease-in-out, -webkit-transform .2s ease-in-out; visibility: hidden; width: 100%; }
  .navbar-collapse.show { transform: translateX(-100%); visibility: visible; z-index: 1; }
  .navbar-light .navbar-nav .nav-link { color: #FFF; }
  .navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link { color: #FFF; }
}