.header.sticky.absolute-light {background:#000;height:80px}
.wrapper {overflow:visible} /* for sticky nav btns */
.d-none {display:none}
#sCdmSur {margin:90px 0 0 0;padding-bottom:20px;line-height:normal;min-height:75vh}
.bgLbXXX {background-color:lightblue}
.bgLgXXX {background-color:lightgreen}

/* existing ans modal */
#existingAnswersModal .btn-matCont {color:#fff;background-color:green;border-color:green}
#existingAnswersModal .btn-matStOvr {color:#fff;background-color:#000;border-color:#000}
#existingAnswersModal .btn-matClose {color:#fff;background-color:darkblue;border-color:red}

/* DASH: PROGRESS BAR + STEP NAV */
#cdmSurTop {display:flex;width:100%;flex-wrap:nowrap;justify-content:space-between;align-items:flex-end;margin-bottom:20px}
#cdmSurTop .progInfo {font-weight:bold}
#cdmSurTop .percentBar {height:20px;background-color:#e0e0e0;border-radius:15px;overflow:hidden}
#cdmSurTop .percentBar .fill {height:100%;background-color:#ffcb00;border-radius:15px}
#cdmSurTop .contactBtnCon button {background-color:#fff;font-weight:bold;padding:4px 15px;border:2px solid #c0373f }
#cdmSurTop .contactBtnCon button:hover {background-color:#c0373f;color:#fff;border-color:#ffcb00}

#cdmSurBtm {position:sticky;width:100%;bottom:0;border-top:1px solid #000;padding:15px;z-index:1030;background-color:rgba(255, 255, 255, 80%)}
#cdmSurBtm #cdmSurStepNav {display:flex;justify-content:space-between}
#cdmSurBtm #cdmSurStepNav button {
    margin-left:5px;padding:1px 8px 3px 8px;border:3px solid #000;border-radius:7px;background-color:#fff;
    color:#000;font-family:monospace;font-weight:bold;font-size:24px;line-height:21px;text-align:center;
}
#cdmSurBtm #cdmSurStepNav {max-width:1380px;margin:0 auto}
#cdmSurBtm #cdmSurStepNav button.enabled:hover {background-color:#ffcb00}
#cdmSurBtm #cdmSurStepNav button.disabled {color:#fff;border-color:#fff}

/* FRM CDM SURVEY */
#sCdmSur #frmCdmSurvey {
    position:relative;
    /*overflow:hidden; <- apply at runtime IF slider is reactivated: [add, slide, remove] */
}
#sCdmSur #frmCdmSurvey .newContentLeft {
    position: relative;
    left: 100%; /* Initially off the screen */
    transition: left 0.5s ease; /* Controls the slide-in speed */
}
#sCdmSur #frmCdmSurvey .newContentRight {
    position: relative;
    right: 100%; /* Initially off the screen */
    transition: right 0.5s ease; /* Controls the slide-in speed */
}

/* Q AND A - Question and Answer buttons below */
#sCdmSur p.qstTxt {font-weight:bold;font-size:26px;margin-bottom:20px}
#sCdmSur .ansCon {display:flex;flex-direction:column}
#sCdmSur .ansRow {position:relative;width:90%}
#sCdmSur .ansRow .selAnsChk {
    position:absolute;top:50%;transform:translateY(-50%);right:-35px;width:30px;
    font-weight:bold;font-size:41px;color:green;padding-bottom:21px;
}
#sCdmSur .ansCon button:hover {
    background-color: #9f0b14;outline-color:#84363d;
}

/* COMMON TO VARIOUS qstyle TPLS */
#sCdmSur .row .copyCol {padding:0 15px;display:flex;flex-direction:column;justify-content:space-evenly;}/* the right-side copy column in most qstyles */
#sCdmSur .row .qCopy {margin-top:10px}
#sCdmSur .leadImg {text-align:center}
#sCdmSur .leadImg img {width:60px;vertical-align:baseline}
#sCdmSur .btnCtaCon {
    text-align:center;
}
#sCdmSur a.btnCta1:link,
#sCdmSur a.btnCta1:visited {
    width:auto;display:inline-block;padding:4px 40px;border:2px solid #000;
    text-align:center;background-color:#eaeaea;color:#db0606;font-weight:bold
}

#sCdmSur .introCon p {margin-bottom:20px}
#sCdmSur .btnConIntro {margin-top:40px}
#sCdmSur .btnConIntro button,
#sCdmSur .ansCon button {
    display:block;color:#fff;font-weight:bold;text-align:left;
    background-color:#c0373f;outline:2px solid transparent;padding:10px;margin:10px;border:none;
}
#sCdmSur .ansCon button {width:100%;margin:0 0 15px 0}
#sCdmSur .btnConIntro button {width:230px;max-width:200px;margin:0 auto 20px auto}
#sCdmSur .btnConIntro button:hover {background-color:#9f0b14;outline-color:#84363d}
#sCdmSur .btnConContinue {margin-top:30px;padding-top:20px;text-align:center;border-top:1px solid #000}
#sCdmSur .btnConContinue p {font-weight:bold;margin-bottom:20px}
#sCdmSur .btnConContinue button {padding:4px 40px;border:2px solid #000;text-align:center;background-color:#eaeaea;color:#db0606;font-weight:bold}

#sCdmSur .ansCon {align-items:flex-start}
#sCdmSur .ansCon button {text-align:left}

#sCdmSur .videoCon .videoEmbed {display:none}
#sCdmSur .videoCon .videoPlaceholder {position:relative}
#sCdmSur .videoCon .videoPlaceholder img {width:100%}
#sCdmSur .videoCon .videoPlayBtn {
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:90px;height:60px;border:5px solid rgba(255,255,255,80%);box-shadow:0 0 5px #000, inset 0 0 5px #000;
    display:flex;align-items:center;justify-content:center;
}
#sCdmSur .videoCon .videoPlayBtn:hover {background-color:#c0373f;border-color:#ffcb00;cursor:pointer;box-shadow:0 0 5px #fff}
#sCdmSur .videoCon .videoPlayBtn .videoPlayArrow {
    width:0;height:0;border-style:solid;border-width:15px 0 15px 30px;
    border-color:transparent transparent transparent rgba(255,255,255,80%);filter:drop-shadow(2px 2px 4px black);
}
#sCdmSur .videoCon .videoPlayBtn:hover .videoPlayArrow {filter:none;border-color:transparent transparent transparent rgba(255,255,255,1)}

/* qstyle01 */
#sCdmSur .qstyle01 {text-align:center}
#sCdmSur .qstyle01 p.qstTxt {font-size:33px}
#sCdmSur .qstyle01 .ansCon {align-items:center}
#sCdmSur .qstyle01 .ansRow {width:230px}
#sCdmSur .qstyle01 .ansCon button {text-align:center}

/* qstyle02 */
#sCdmSur .qstyle02.highschool .row .qCopy {margin-bottom:15px}


/* qstyle03 */
#sCdmSur .qstyle03 .row .copyCol {padding:20px}
#sCdmSur .qstyle03 .vidPlaceholder img {width:100%}

/* qstyle04 */
#sCdmSur .qstyle04 .row .qCopy {margin-bottom:15px}
#sCdmSur .qstyle04 .btnCtaCon {color:#84363d;text-align:right;margin-top:15px}
#sCdmSur .qstyle04 .btnOvalArrow span {display:inline-block;border:2px solid #db0606;padding:2px 5px 2px 8px;border-radius:50%;margin-right:10px}
#sCdmSur .qstyle04 .btnCtaCon a:link,
#sCdmSur .qstyle04 .btnCtaCon a:visited {width:200px;display:inline-block;color:#db0606;font-weight:bold}
#sCdmSur .qstyle04 .btnCtaCon a:hover {text-shadow:0 0 3px yellow}
#sCdmSur .qstyle04 .btnCtaCon a:hover span {box-shadow:0px 0px 4px yellow}
#sCdmSur .qstyle04 .repeaters ul {margin-top:10px}

/* qstyle05 */
#sCdmSur .qstyle05 .c1 {padding:0}
#sCdmSur .qstyle05 .statsCon {margin-top:15px;max-width:550px}
#sCdmSur .qstyle05 .statsRow {display:flex;align-items:center;margin-bottom:15px}
#sCdmSur .qstyle05 .statsRow .c1 {font-family:Montserrat;font-size:54px;font-weight:600;padding-right:20px}
#sCdmSur .qstyle05 .copyCol {padding:0 20px}
#sCdmSur .qstyle05 .percentHeading {font-size:23px;text-align:center}
#sCdmSur .qstyle05.highschool .row .copyCol  {justify-content:center;margin-top:0}
#sCdmSur .qstyle05.highschool .percentHeading {font-weight:bold}

/* qstyle06 */
#sCdmSur .qstyle06 .row .qCopy {margin-top:15px}

/* fstyle01 */
#sCdmSur .fstyle01 .heading {font-weight:600;font-size:22px}
#sCdmSur .fstyle01 .leadImg img {width:50px}
#sCdmSur .fstyle01 .qCopy > div {margin:15px 0}
#sCdmSur .fstyle01 input {width:100%;border:1px solid #2f2f2f}
#sCdmSur .fstyle01 .btnSubmitCon {text-align:center}
#sCdmSur .fstyle01 .btnSubmitCon p {background-color:#ffcb00;padding:10px;font-style:italic;border-radius:5px}
#sCdmSur .btnFormSubmit {
    color:#fff;font-weight:bold;text-align:left;background-color:#c0373f;outline:2px solid transparent;
    margin-bottom:10px;border:none;padding:10px 40px
}
#sCdmSur .btnFormSubmit:hover {
    background-color: #9f0b14;outline-color:#84363d;
}

/* fstyle02 */
#sCdmSur .fstyle02 .row .qCopy {margin-bottom:15px}
#sCdmSur .fstyle02 .repeaters ul {margin-top:10px}

/* complete01 */
#sCdmSur .complete01 .p1 {font-size:22px}

@media (max-width:575px) {
    #sCdmSur .qstyle05 .row .copyCol {padding:0}
    #sCdmSur .qstyle06 .row .copyCol {margin-top:10px;padding:0 15px}

    #sCdmSur .fstyle02 .container {max-width:none}
    #sCdmSur .fstyle02 .c1 {margin:0;padding:0}

}
#sCdmSur .fstyle02 .heading {font-weight:600;font-size:22px;margin:0 0 10px 0}
#sCdmSur #ifrmMCL {width:106%;margin:0 -3%;height:70vh}


@media (min-width:576px) {
    #sCdmSur {margin-bottom:30px}
    #sCdmSur .ansRow {width:50%}
    #cdmSurTop .progInfo {width:25%}
    #sCdmSur .introCon {max-width:500px;margin:0 auto}
    #sCdmSur .btnConIntro {display:flex;justify-content:space-evenly}
    #sCdmSur .btnConIntro button {width:210px;margin:0}
}

@media (min-width:576px) and (max-width:767px) {
    #sCdmSur .fstyle01 .c1 {width:90%;margin:0 auto}
    #sCdmSur .fstyle01 input {width:70%;border:1px solid #2f2f2f}
}

@media (min-width:768px) {
    #sCdmSur {margin:110px 0 30px 0;min-height:450px}
    #sCdmSur .ansRow {width:90%}
    #sCdmSur .row .copyCol {padding:0 20px}
    #sCdmSur .fstyle01 input {width:90%}
    #sCdmSur .ansRow button {margin-right:auto;margin-bottom:20px}
    #sCdmSur .ansRow .selAnsChk {padding-bottom:28px}
    #sCdmSur .qstyle05 .row .copyCol {margin-top:35px}
}

@media (min-width:992px) {
    #sCdmSur #ifrmMCL {width:100%;margin:0}
}

@media (min-width:1279px) {
    #sCdmSur .fstyle01 input {width:70%}
    #sCdmSur .qstyle03 .row .copyCol,
    #sCdmSur .qstyle06 .row .copyCol {padding:10px 110px 0 110px}
}

@media (min-width:1400px) {
    #sCdmSur .qstyle03 .row .copyCol,
    #sCdmSur .qstyle06 .row .copyCol {
        padding: 10px 130px 0 130px
    }
}

@media (min-width:34992px) {
    /* INTRO - take survey or contact */
    #sCdmSur .introCon {width:60%;margin:0 auto;max-width:none}
    #sCdmSur .btnConContinue {margin-top:20px;padding-top:10px;text-align:center;border-top:1px solid #000}
    #sCdmSur .btnConContinue p {font-weight:bold}
    #sCdmSur .btnConContinue button {padding:4px 40px;border:2px solid #000;text-align:center;background-color:#eaeaea;color:#db0606;font-weight:bold}


    /* Q AND A - Question and Answer buttons below */
    #sCdmSur .qstTxt {font-weight:bold;font-size:32px}
    #sCdmSur .ansCon {display:flex;align-items:center;flex-direction:column}
    #sCdmSur .ansRow {position:relative;width:50%;margin-right:auto}
    #sCdmSur .ansRow .selAnsChk {
        position:absolute;top:50%;transform:translateY(-50%);right:-45px;width:30px;
        font-weight:bold;font-size:45px;color:green;padding-bottom:15px;
    }
    #sCdmSurXXX .ansCon button {
        width:100%;color:#fff;font-weight:bold;text-align:left;
        background-color:#c0373f;outline:2px solid transparent;padding:10px;margin-bottom:10px;border:none;
    }
    #sCdmSur .ansCon button:hover {
        background-color: #9f0b14;outline-color:#84363d;
    }

    /* qstyle01 */
    #sCdmSur .qstyle01 {
        text-align:center
    }
    #sCdmSur .qstyle01 .ansCon {
        margin:0 auto;
        width:450px; /* TODO: media queries to adjust this width for devices, e.g., for mobile portrait it should be 100% */
    }
    #sCdmSur .qstyle01 .ansRow {
        margin:0 auto;
    }

    /* qstyle02 */
    #sCdmSur .qstyle02 .row .qCopy {margin-top:0}

    /* qstyle04 */
    #sCdmSur .qstyle04 .btnCtaCon {color:#84363d;text-align:right}
    #sCdmSur .qstyle04 .btnOvalArrow span {display:inline-block;border:2px solid #db0606;padding:2px 5px 2px 8px;border-radius:50%;margin-right:10px}
    #sCdmSur .qstyle04 .btnCtaCon a:link,
    #sCdmSur .qstyle04 .btnCtaCon a:visited {
        width:200px;display:inline-block;color:#db0606;font-weight:bold;
    }
    #sCdmSur .qstyle04 .btnCtaCon a:hover {text-shadow:0 0 3px yellow}
    #sCdmSur .qstyle04 .btnCtaCon a:hover span {box-shadow:0px 0px 4px yellow}

    /* qstyle05 */
    #sCdmSur .qstyle05 .statsCon {width:60%;margin:0 auto}
    #sCdmSur .qstyle05 .statsRow {display:flex;align-items:center;margin-bottom:10px}
    #sCdmSur .qstyle05 .statsRow .c1 {font-family:Montserrat;font-size:60px;font-weight:600;padding-right:20px}

    /* fstyle01 */
    #sCdmSur .fstyle01 .heading {font-weight:600;font-size:30px}
    #sCdmSur .fstyle01 .leadImg img {width:50px}
    #sCdmSur .fstyle01 .qCopy > div {margin:15px 0}
    #sCdmSur .fstyle01 input {width:60%;border:1px solid #2f2f2f}
    #sCdmSur .btnFormSubmit {
        color:#fff;font-weight:bold;text-align:left;
        background-color:#c0373f;outline:2px solid transparent;
        margin-bottom:10px;border:none;padding:10px 40px
    }
    #sCdmSur .btnFormSubmit:hover {
        background-color: #9f0b14;outline-color:#84363d;
    }

    /* fstyle02 */
    #sCdmSur .fstyle02 .container {max-width:none}
    #sCdmSur .fstyle02 .heading {font-weight:600;font-size:30px}

    #sCdmSur #ifrmMCL {width:100%;height:70vh}
}