/* 2020 June - Wildlife Quiz v.1 */

article {
    max-width: 100% !important;
    width: 100vw !important;
    margin: 0px !important;
    padding: 0px !important;
    background-color: #888a8d !important;
}

header.at-title,
/* div.ngp-form form, */
footer.form-footer,
footer.FooterHtml,
.at-form > section > form {
    display: none;
}


.HeaderHtml,
.FooterHtml,
.MeterHtml {
    padding: 0px !important;
}

.ngp-form {
    max-width: 100% !important;
}

main.theme-content,
header.at-markup.HeaderHtml {
    padding: 0px !important;

}

body { background-color: #ffffff !important; }
.quiz-header { background: #ffffff; width: 100%; }
.quiz-header-container { max-width: 800px; }
header section figure.quiz-branding { width: 100px; margin: 5px 0px 10px 20vw; }
footer figure.quiz-branding { width: 150px; float: right; margin: 30px 0px; }
footer.theme-footer { background-color: #888a8d; display: flex; }
#inner-footer { margin: 0px auto; width: 80%; max-width: 1100px; }
#inner-footer .logo { float: right; }
#inner-footer .words { float: left; }
.words p { color: #ffffff; line-height: 1.5; font-size: 18px; margin: 20px 0px; }

.quizContent, .quizBasicText, .quizBasicText p, .quizIntroText { max-width: 700px !important; }

span.answerText {
    text-transform: uppercase;
}

.quizFocusText h3 {
    color: #ffffff !important;
    font-size: 1.5em !important;
    font-family: "Cabin", sans-serif !important;
    font-weight: 700;
}


.quizIntroText p, .quizIntroText span {
    font-size: 1.5em !important;
    font-weight: 700;
    font-family: "Cabin", sans-serif;
    color: #fcb26b;
    text-align: center;
}
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    background-color: #ffffff;
    font-family: Helvetica, sans-serif;
}

.wrapSet {
    display: inline-block;
}

div#progressBar { width: 100%; height: auto; display: block; margin: 0px; padding: 0px; background: linear-gradient(90deg, #eb6b12 50%, #a1a8a9 50%) }

div#progressBar img { width: 100%; max-width: 910px; height: auto; display: block; margin: 0px auto; padding: 0px; }


/* update this */
div.mwdQuizEngine div.quizContainer div.quizBackground div.quizContentContainer div.quizContent div.quizContentImage {
    -ms-flex-order: 1 !important;
    -o-transition: opacity 2.5s !important;
    -webkit-background-size: cover !important;
    -webkit-border-radius: 0px !important;
    -webkit-box-ordinal-group: 2 !important;
    -webkit-order: 1 !important;
    -webkit-transition: opacity 2.5s !important;
    background-color: transparent !important;
    background-position: 50% !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    border: 0px !important;
    border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    height: 12em !important;
    margin: 1em !important;
    max-height: 12em !important;
    max-width: 12em !important;
    min-height: 12em !important;
    min-width: 12em !important;
    width: 12em !important;
}

.quizSubArea {
    opacity: 1 !important;
    z-index: 1;
}

div.mwdQuizEngine div.quizContainer div.quizBackground div.quizSubArea button {
    border: 0px !important;
}

.reveal button {
    margin: 40px auto 0px !important;
    display: block;
}

div.quizContainer div.quizBackground div.quizSubArea button, .reveal button, button, button span {
    font-family: "Cabin", sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.3em !important;
    min-height: unset !important;
    text-transform: uppercase !important;
}

/* EMAIL SIGNUP FORM  */

div.mwdQuizEngine div.quizContainer div.quizBackground div.quizContentContainer div.quizContent form.userInfo div.inputGroup {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    max-width: 30em;
    margin: 0px auto;
}

div.mwdQuizEngine div.quizContainer div.quizBackground div.quizContentContainer div.quizContent form.userInfo div.inputGroup label {
    display:none !important;
}

div.mwdQuizEngine div.quizContainer div.quizBackground div.quizContentContainer div.quizContent form.userInfo div.inputGroup input {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    width: 100%;
    padding: 0.5rem;
    color: #000000;
    background-color: #ffffff;
    border: 2px solid transparent;
    -webkit-transition: color 0.5s, border 0.5s;
    -o-transition: color 0.5s, border 0.5s;
    transition: color 0.5s, border 0.5s;
    border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
}

div.mwdQuizEngine div.quizContainer div.quizBackground div.quizContentContainer div.quizContent form.userInfo div.inputGroup.error input {
    color: #fa5252;
    border-color: #fa5252;
}

div.mwdQuizEngine div.quizContainer div.quizBackground div.quizContentContainer div.quizContent form.userInfo div.inputGroup div.feedback {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    /* margin-top: 0.125rem; */
    /* padding-left: 0.125rem; */
    font-size: 0.8em;
    text-align: left;
}

div.mwdQuizEngine div.quizContainer div.quizBackground div.quizContentContainer div.quizContent form.userInfo div.inputGroup div.feedback.error {
    display: none;
    color: #fa5252;
    font-weight: bold;
    font-size: .6em;
}


div.mwdQuizEngine div.quizContainer div.quizBackground div.quizContentContainer div.quizContent form.userInfo div.inputGroup div.feedback p {
    font-size: .7em;
    font-weight: normal;
}


div.mwdQuizEngine div.quizContainer div.quizBackground div.quizContentContainer div.quizContent form.userInfo div.inputGroup.half {
    flex-basis: 50% !important;
}

div.mwdQuizEngine div.quizContainer div.quizBackground div.quizContentContainer div.quizContent form.userInfo div.inputGroup.half:first-of-type {
    margin-left: 0px;
    margin-right: 1%;
}

div.mwdQuizEngine div.quizContainer div.quizBackground div.quizContentContainer div.quizContent form.userInfo div.inputGroup.half:last-of-type {
    margin-right: 0px;
    margin-left: 1%;
}

form.userInfo { display: block !important; }

.hidden { display: none !important; }

/* animations */

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
        top: 2em;
    }

    66% {
        opacity: 0;
        top: 2em;
    }

    100% {
        opacity: 1;
        top: 0;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        top: 2em;
    }

    66% {
        opacity: 0;
        top: 2em;
    }

    100% {
        opacity: 1;
        top: 0;
    }
}