:root {
    /* Colors */
    --white: #fff;
    --primary-color: #1b1638;
    --black: #333333;
}

/*************** Flex ***************/
.flex {
    display: flex;
}

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



input:checked + label::before {
    background-color: #1b1638 !important;
}


.blueTitle {
    font-weight: bold;
    color: #1b1638;
}


.appDiv {
    display:flex;
    justify-content: center;
    align-items:center;
    border-right:1px solid #ccc;
}

.row-eq-height {
    display:flex;
}

.healthQ {
    text-align:center;
}


@media (min-width: 768px) {
.landing-image-add {
    background-image: url(../../uploads/00001211/sbow-add-bg.jpg);
    background-position: 30% 0%;
    background-color: #becce9;
    background-repeat: no-repeat !important;
}

}





@media (max-width: 768px) {
    .appDiv {
        display:block;
    }
    
    .row-eq-height {
        display:block;
    }
    
    .persona-image {
    background-color: #E9F4FA !important;
}

}


@media (max-width: 768px) {
    .padding {
        padding-top: 0px !important;
    }
    
}


.wide2{
    
}


@media (min-width: 768px) { 
    
    .healthQ {
        text-align:left;
    }
}


.col {
    flex: 1 0 0%;
}


.col-8 {
    flex: 0 0. auto;
    width: 66.66666667%;
}

  .col-12 {
    flex: 0 0 auto;
    width: 87%;
}




@media (min-width: 767px) {
.card-box {
    border: 1px solid #ccc;
    padding: 49px;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.12); 
}

}


@media (max-width: 767px) {
.card-box {
     border: none !important; 
    padding: 12px !important;
    box-shadow: none !important;
}
}

@media (min-width: 767px) {
.children-card-box {
    border: 1px solid #ccc;
    padding: 49px;
    padding-top: 3px !important;
    padding-bottom: 0px !important;
   
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.12); 
}

}




@media (max-width: 767px) {
.children-card-box {
     border: none !important; 
    padding: 12px !important;
    box-shadow: none !important;
}
}

/************** Float **************/
@media(min-width:1400px) {
    .float-xxl-end {
        float: right !important;
    }
    
}
@media(min-width:1200px) {
    .float-xl-end {
        float: right !important;
    }
    
}
@media(max-width:992px) {
    .float-lg-end {
        float: right !important;
    }
    
}
@media(max-width:768px) {
    .float-md-end {
        float: right !important;
    }
}
@media(max-width:576px) {
    .float-sm-end {
        float: right !important;
    }
}
.float-start {
    float: left !important;
}
.float-end {
    float: right !important;
}

/*************** Jumbotron ***************/
.jumbotron1 {
    margin-bottom: 0;
    font-family: 'Helvetica','Arial','sans-serif', 'Lato';
}
.jumbotron1 p {
    font-size: 16px;
    color: var(--black);
    line-height: 1.5em;
}
.jumbotron1 h3 {
	color: var(--black);
	font-weight: 600;
	font-size: 20px;
font-family: Helvetica, 'Aria' ,sans-serif, 'Lato';
}
.jumbotron1 h4 {
	color: var(--black);
	font-weight: 500;
	font-size: 20px;
}
.jumbotron1 h5 {
	color: var(--black);
	font-weight: 600;
	font-size: 16px;
}
.landing-home-life h1 {
	font-size: 28px;
	color: var(--primary-color);
 font-family: Helvetica, 'Aria' ,sans-serif, 'Lato';
}

/************** Jumbotron Info Section **************/
.infoCards {
    padding-top: 24px;
    padding-bottom: 24px;
}
.infoCards h3 {
    text-transform: uppercase;
    color: var(--primary-color);
    font-weight:600;
}
@media (min-width: 1200px) {
    .infoCards {
        border-radius: 0% 0% 50% 50%;
        width: 300px;
        height: 300px; 
        border: 4px solid var(--secondary-color);
        padding-top: 20%;
    }
    .infoCards h3 {
        text-transform: uppercase;
        /*color: var(--black);*/
    }
}
@media (min-width: 768px) {
 .jumbotron1 {
        min-height: 500px !important;
    }
}
@media(max-width:767px){
    .hide-br{
        display: none;
    }
    .crossSell{
        margin-bottom: 50px;
    }
    .plus-row h4, .six-mo-row h4, .two-yr-row h4{
        padding: 26px 0px 20px 0px;
    }
    .jumbotron1 .crossSell, .productRow  .crossSell{
        margin-bottom: 20px;
    }
}

/*************** Row ***************/
.row.card-default-row {
    margin: 0 0 0 0;
}
.row.card-calcuator-row {
    margin: 0 0 0 0;
}

/*************** Misc. ***************/
.landingInfo p {
    font-size: 16px !important;
    line-height: 1.5em !important;
}
@media (min-width: 768px) {
 .landingInfo p {
        font-size: 18px !important;
        line-height: 1.7em !important;
        margin-bottom: 32px !important;
    }
}
.col-6 {
    flex: 0 0 auto;
    width: 50%;
}
.textbox .spacer {
    display: none;
}
.visible {
    position: absolute !important;
    clip: rect(1px,1px,1px,1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
}
input[type="text"], input[type="password"], select {
    border: 1px solid #5a5a5a !important;
    cursor: text;
    font-size: 15px;
    font-weight: 400;
    width: 100%;
    padding: 0.5em;
    text-align: left !important;
    border-radius: 4px;
    height: 45px;
    position: relative;
}
.calculatorDiv {
    background: #fff;
    padding: 11px 30px !important;
}
label, .spacer {
    color: #454545;
    font-weight: 400;
    font-size: 15px;
    margin-top: 0px !important;
}
.bigBold {
    font-weight: 700;
}

/*************** Gender ***************/
.genderDiv .btn-block{
width: auto;
}
.genderDiv .spacer{
    margin-bottom: 10px;
}
.genderDiv .productField{
    min-height: 36px;
}

/*************** Product Row ***************/
.productRow {
    margin-top: -76px;
}
@media (max-width: 767px) {
    .productRow {
        background-color: #eee;
        padding-bottom: 30px;
        padding-top: 40px !important;
    }
}
@media (max-width: 992px) {
    .productRow {
       margin-top: -70px;
    }
}
@media (max-width: 1366px) {
    .productRow {
       margin-top: -70px;
    }
}

/*************** Button Hover ***************/
.blueBackground .btn-primary:hover, .blueBackground .btn-primary.active:hover {
    background-color: #18567c !important;
    border-color: #18567c !important;
    cursor: pointer;
}

/*************** Product Cards ***************/
.productRow p {
    font-size: 16px;
    color: var(--black);
}
.prod-card-box-link {
    text-decoration: none;
}
.prod-card-box-link:hover {
    text-decoration: none;
}
.prod-card-box {
    padding: 16px 16px 16px 16px;
    background-color: var(--white) !important;
    box-shadow: 0 4px 5px 0 rgb(0 0 0 / 12%);
    transition: all 0.2s;
    border-radius: 10px;
    text-align: center;
    position: relative;
}
.prod-card-box:hover {
    transform: scale(1.02) perspective(1px); 
    background-color: var(--white);
}
.prod-card-box h4, .prod-card-box .card-enroll {
    color: var( --primary-color);
}
/*.prod-card-box .card-enroll {*/
/*    position: absolute;*/
/*    bottom: 0%;*/
/*}*/
@media (min-width: 768px) {
    .card-box {
        border: 1px solid #ccc;
        padding: 49px !important;
        box-shadow: 0 4px 5px 0 rgba(0,0,0,0.12);
    }
}
@media(max-width: 991px){
    .prod-card-box {
        min-height: 200px;
    }
}
@media(min-width: 992px) and (max-width: 1199px){
    .prod-card-box {
        height: 211px;
    }
    .prod-card-box .card-enroll {
        left: 39%;
    }    
}
@media(min-width: 1200px) and (max-width: 1399px){
    .prod-card-box {
        height: 220px;
    }
    .prod-card-box .card-enroll {
        left: 32%;
    }    
}
@media(min-width: 1400px){
    .prod-card-box {
        height: 200px;
    }
    .prod-card-box .card-enroll {
        left: 35%;
    }
}

/*************** Slider ***************/
.sliderlabel span.sliderprompt {
    display: none;
}
.sliderlabel span.slidervalue {
    font-size: 18px;
    font-weight: 500;
    color: var(--black);
    line-height: 30px;
}
.slider-box {
    padding: 4px;
    border-radius: 4px;
    height: 44px;
    position: relative;
}
.slider-box .sliderLabelLeft {
    position: absolute;
    top: 6px;
    left: 0px;
}
.slider-box .sliderLabelRight {
    position: absolute;
    top: 6px;
    right: 0px;
}
.slider-box .ui-widget-content {
    margin: 16px 0px 6px 0px;
}
.sliderLabelLeft, .sliderLabelRight {
    font-weight: 500;
}
.slider_limits {
    font-size: 100%;
    font-weight: 500;
    color: var(--black);
}

/*************** Landing Images ***************/
.landing-image{
    background-color:#f2e9d6;
}
.landing-image{
    background-image:url(../../uploads/00001263/mother-child-beach.jpg);
    background-position: 70% 30%;
}
.landing-image-life {
    background-image: url(../../uploads/00001263/spark-life-bg.jpg);
    background-position: 46% 0%;
    background-color: #393633;
}
@media (min-width: 768px) {
    .landing-image-life {
        background-image: url(../../uploads/00001263/spark-life-bg.jpg);
        background-position: 30% 0%;
        background-color: #393633;
        background-repeat: no-repeat !important;
    }
}
@media (min-width: 768px) {
    .spark-home-image {
        background-position: 50% 22%;
        background-size: 87%;
        background-repeat: no-repeat;
        background-color: #e8f0f2;
        background-image: url(../../uploads/00001263/Family-son-mom-dad.jpeg);
    }
}
.spark-home-image {
    background-color:#f2e9d6 !important;
}
@media (min-width: 768px) {
    .landing-image-add {
        background-image: url(../../uploads/00001211/sbow-add-bg.jpg);
        background-position: 100% 0% !important;
        background-color: #becce9;
    }
}
.wide2 {
    background-size: 80%;
    background-position: 100% 20%;
    background-repeat: no-repeat;
}
@media (min-width: 1662px) {
    .wide2 {
        background-size: 81%;
        background-position: 100% 20%;
        background-repeat: no-repeat;
    }
}
@media (max-width: 1582px) {
    .wide2 {
        background-size: 110%;
        background-position: 100% 20%;
        background-repeat: no-repeat;
    }
}
@media (max-width: 1448px) {
    .wide2 {
        background-size: 114%;
        background-position: 100% 20%;
        background-repeat: no-repeat;
    }
}
@media (max-width: 1361px) {
    .wide2 {
        background-size: 128%;
        background-position: 100% 20%;
        background-repeat: no-repeat;
    }
}
@media (max-width: 1215px) {
    .wide2 {
        background-size: 129%;
        background-position: 100% 20%;
        background-repeat: no-repeat;
    }
}
@media (max-width: 1209px) {
    .wide2 {
        background-size: 135%;
        background-position: 100% 20%;
        background-repeat: no-repeat;
    }
}

@media (max-width: 1128px) {
    .wide2 {
        background-size: 153%;
        background-position: 100% 20%;
        background-repeat: no-repeat;
    }
}
@media (max-width: 993px) {
    .wide2 {
        background-size: 163%;
        background-position: 100% 20%;
        background-repeat: no-repeat;
    }
}
@media (max-width: 970px) {
    .wide2 {
        background-size: 174%;
        background-position: 100% 20%;
        background-repeat: no-repeat;
    }
}
@media (max-width: 836px) {
    .wide2 {
        background-size: 196%;
        background-position: 100% 20%;
        background-repeat: no-repeat;
    }
}
.wide3 {
    background-size: 47%;
    background-position: 100% 20% !important;
    background-repeat: no-repeat;
}

@media (min-width: 1662px) {
    .wide3 {
        background-size: 39%;
        background-position: 100% 20% !important;
        background-repeat: no-repeat;
    }
}
@media (max-width: 1582px) {
    .wide3 {
        background-size: 44%;
        background-position: 100% 20% !important;
        background-repeat: no-repeat;
    }
}
@media (max-width: 1448px) {
    .wide3 {
        background-size: 46%;
        background-position: 100% 20% !important;
        background-repeat: no-repeat;
    }
}
@media (max-width: 1361px) {
    .wide3 {
        background-size: 54%;
        background-position: 100% 20% !important;
        background-repeat: no-repeat;
    }
}
@media (max-width: 1215px) {
    .wide3 {
        background-size: 56%;
        background-position: 100% 20% !important;
        background-repeat: no-repeat;
    }
}
@media (max-width: 1209px) {
    .wide3 {
        background-size: 60%;
        background-position: 100% 20% !important;
        background-repeat: no-repeat;
    }
}
@media (max-width: 1128px) {
    .wide3 {
        background-size: 65%;
        background-position: 100% 20% !important;
        background-repeat: no-repeat;
    }
}
@media (max-width: 993px) {
    .wide3 {
        background-size: 66%;
        background-position: 100% 20% !important;
        background-repeat: no-repeat;
    }
}
@media (max-width: 970px) {
    .wide3 {
        background-size: 69%;
        background-position: 100% 20% 1;
        background-repeat: no-repeat;
    }
}
@media (max-width: 836px) {
    .wide3 {
        background-size: 70%;
        background-position: 100% 20% !important;
        background-repeat: no-repeat;
    }
}

/*************** Calculator ***************/
@media (max-width: 767px) {
    .calculatorHeadDiv {
        background: #fff;
        padding: 28px 28px !important;
    }
}

/*************** Yes/No Button ***************/
.yesNoBtn .productField .buttonState:focus {
		   height: fit-content !important;
		    padding: 11px 0 11px 2px !important;
		    margin: -5px 5px 0 0 !important;
}
.yesNoBtn .productField .buttonState:focus {
		  border: 2px solid #005fcc !important;
}

/*************** Alerts ***************/
.alert {
    border: 1px solid black;
    background-color: lightgray;
}

/*************** Font Awesome ***************/
.fa, .fas {
    font-weight: 900;
}
.fa, .far, .fas {
    font-family: "Font Awesome 5 Free";
}
.fa, .fab, .fad, .fal, .far, .fas {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

.productField .buttonState:focus {
    border: 2px solid #005fcc;
}

.footer .nav li a:hover, .footer .nav li a:focus {
    background: none;
    text-decoration: underline;
}

select:active, select:hover, select:focus, input:focus, button:focus {
    outline-color: #1b1638;
}
.productField input[type="radio"]:focus + label {
    border: 2px solid #1b1638;
    padding: 5px;
    border-radius: 0px;
}

.enrollButton .buttonState:focus{
    outline: 3px solid #1b1638;
    outline-offset: 3px;
}

.childButton .buttonState{
    margin-bottom: 10px;
}