* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html, button {
   font-family: "HCo Gotham", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; 
}

header {
    display: inline-block;
    height: 100px;
    max-width: 100%;
    border-bottom: 1px solid #707070;
}

main.nrs-quiz h3 {
    font-weight: 400;
}

header .nationwide-logo {
    width: 60%;
    margin: 2rem auto 2rem auto;
}

header .nationwide-logo img {
    display: block;
    height: auto;
    max-width: 100%;
    margin: 1rem auto 0 auto;
}

/* main.nrs-quiz h3 */
main.nrs-quiz h1
 {
    font-weight: 700;
}

.quiz-intro {
    margin-bottom: 3rem;
}

.quiz-intro h1 {
    margin: 4rem 0 1.5rem 0;
    text-align: center;
}

.quiz-intro button {
    color: #ffffffff;
    background-color: #008574ff;
}

.quiz-intro .intro-content-wrapper {
    display: grid;
    grid-template-columns: repeat(99, 1fr);
    width: 100%;
}

.question-container .button {
    padding: .5em .6em .3em .3em;
}

.button.hollow.nw-button--hollow-rebrand-vibrant-blue span,
.button.hollow.nw-button--hollow-blue-light span,
.questions-wrapper .question-wrapper.question-five .question-incorrect-answer button span {
    vertical-align: super;
}

.questions-wrapper .question-wrapper .question-container {
    display: grid;
    grid-template-columns: repeat(99, 1fr);
    width: 100%;
    height: auto;
    overflow: hidden;
    padding: 7rem 0;
    margin: auto;
    max-width: 1130px;
}

.questions-wrapper .question-wrapper .question-answer,
.questions-wrapper .question-wrapper .question-incorrect-answer,
.insurance-master,
.insurance-pro,
.insurance-rookie,
.nw-small-cta,
.tiles-wrapper.ending {
    display: none;
}

.insurance-master,
.insurance-pro,
.insurance-rookie {
    justify-self: center;
    padding: 3rem;
    width: 1150px;
    max-width: 90%;
}

.insurance-master img,
.insurance-pro img,
.insurance-rookie img {
    padding-right: 3rem;
}

.quiz-intro .intro-content-wrapper .intro-content {
    justify-self: center;
    grid-column: 1 / 99;
    text-align: center;
}

.quiz-intro .intro-content-wrapper .intro-image {
    grid-column: 52 / 99;
    justify-self: left;
}


.questions-wrapper .question-wrapper.question-one,
.questions-wrapper .question-wrapper.question-four,
.questions-wrapper .question-wrapper.question-seven {
    background-color: #F3F3F3;
}

.questions-wrapper .question-wrapper.question-two,
.questions-wrapper .question-wrapper.question-five,
.questions-wrapper .question-wrapper.question-eight {
    color: #ffffff;
    background-color: #0047BB;
}

.questions-wrapper .question-wrapper.question-one .question-image,
.questions-wrapper .question-wrapper.question-three .question-image,
.questions-wrapper .question-wrapper.question-five .question-image,
.questions-wrapper .question-wrapper.question-six .question-image,
.questions-wrapper .question-wrapper.question-eight .question-image {
    grid-column: 1 / 53;
    justify-self: right;
}

.questions-wrapper .question-wrapper.question-one .question-content,
.questions-wrapper .question-wrapper.question-one .question-answer,
.questions-wrapper .question-wrapper.question-one .question-incorrect-answer,
.questions-wrapper .question-wrapper.question-three .question-content,
.questions-wrapper .question-wrapper.question-three .question-answer,
.questions-wrapper .question-wrapper.question-three .question-incorrect-answer,
.questions-wrapper .question-wrapper.question-five .question-content,
.questions-wrapper .question-wrapper.question-five .question-answer,
.questions-wrapper .question-wrapper.question-five .question-incorrect-answer,
.questions-wrapper .question-wrapper.question-six .question-content,
.questions-wrapper .question-wrapper.question-six .question-answer,
.questions-wrapper .question-wrapper.question-six .question-incorrect-answer,
.questions-wrapper .question-wrapper.question-eight .question-content,
.questions-wrapper .question-wrapper.question-eight .question-answer,
.questions-wrapper .question-wrapper.question-eight .question-incorrect-answer {
    grid-column: 56 / 99;
    max-width: 490px;
}

.questions-wrapper .question-wrapper.question-two .question-image,
.questions-wrapper .question-wrapper.question-four .question-image,
.questions-wrapper .question-wrapper.question-seven .question-image {
    grid-column: 47 / 100;
    grid-row: 1;
    justify-self: left;
}

.questions-wrapper .question-wrapper.question-two .question-content,
.questions-wrapper .question-wrapper.question-two .question-answer,
.questions-wrapper .question-wrapper.question-two .question-incorrect-answer,
.questions-wrapper .question-wrapper.question-four .question-content,
.questions-wrapper .question-wrapper.question-four .question-answer,
.questions-wrapper .question-wrapper.question-four .question-incorrect-answer,
.questions-wrapper .question-wrapper.question-seven .question-incorrect-answer,
.questions-wrapper .question-wrapper.question-seven .question-content,
.questions-wrapper .question-wrapper.question-seven .question-answer {
    grid-column: 1 / 46;
    max-width: 475px;
    justify-self: left;
} 

.questions-wrapper .question-wrapper.question-two .question-answer button,
.questions-wrapper .question-wrapper.question-two .question-incorrect-answer button,
.questions-wrapper .question-wrapper.question-five .question-answer button,
.questions-wrapper .question-wrapper.question-five .question-incorrect-answer button,
.questions-wrapper .question-wrapper.question-eight .question-answer button,
.questions-wrapper .question-wrapper.question-eight .question-incorrect-answer button {
    color: #ffffffff;
    background-color: transparent;
    border: 1px solid #ffffffff;
}

.questions-wrapper .question-wrapper.question-two .question-answer a,
.questions-wrapper .question-wrapper.question-two .question-incorrect-answer a,
.questions-wrapper .question-wrapper.question-five .question-answer a,
.questions-wrapper .question-wrapper.question-five .question-incorrect-answer a {
    font-weight: bold;
    color: #ffffff;
}

.questions-wrapper .question-wrapper.question-two .question-answer button:hover,
.questions-wrapper .question-wrapper.question-two .question-incorrect-answer button:hover,
.questions-wrapper .question-wrapper.question-five .question-answer button:hover,
.questions-wrapper .question-wrapper.question-five .question-incorrect-answer button:hover,
.questions-wrapper .question-wrapper.question-eight .question-answer button:hover,
.questions-wrapper .question-wrapper.question-eight .question-incorrect-answer button:hover {
    color: #171717ff;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .68)), to(rgba(255, 255, 255, .68))), transparent;
    background: linear-gradient(rgba(255, 255, 255, .68), rgba(255, 255, 255, .68)), transparent;
}

.questions-wrapper .question-wrapper.question-two .question-answer button:hover svg,
.questions-wrapper .question-wrapper.question-two .question-incorrect-answer button:hover svg,
.questions-wrapper .question-wrapper.question-five .question-answer button:hover svg,
.questions-wrapper .question-wrapper.question-five .question-incorrect-answer button:hover svg,
.questions-wrapper .question-wrapper.question-eight .question-answer button:hover,
.questions-wrapper .question-wrapper.question-eight .question-incorrect-answer button:hover {
    fill: #000000;
}

.question-wrapper .question-content h3 {
    font-size: 3.2rem;
    margin-bottom: 46px;
}

.question-wrapper .question-answer h3,
.question-wrapper .question-incorrect-answer h3 {
    font-size: 3.2rem;
    margin-bottom: 26px;
}

.tiles-wrapper .tile {
    display: grid;
    grid-template-columns: 9fr 1fr;
    text-align: left;
    max-width: 480px;
    width: 100%;
    color: #0047BB;
    background-color: #ffffff;
    border: 1px solid #D0D3D4;
    border-radius: 5px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: background-color 350ms ease 0s;
}

.tiles-wrapper .tile:hover,
.tiles-wrapper .tile:focus {
    background: #e8e9ea;
}

.tiles-wrapper .nw-container {
    width: 1280px;
    max-width: 95%;
}

.tiles-wrapper .tile p {
    padding: 25px 0 15px 15px;
    margin: 0;
}

.tiles-wrapper .tile p.tile-text {
    padding: 0 0 15px 15px;
    color: #000000;
}

.tiles-wrapper .tile svg {
    align-self: center;
    height: 28px;
    width: 28px;
}

.results-wrapper {
    background-color: #141b4dff;
    color: #ffffffff;
    fill: #ffffffff;
}

.bolt-tile-wc {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    border: 1px solid #d0d3d4ff;
    height: 100%;
    background: white;
    transition: background-color 350ms;
}

.nw-cta-small__text {
    text-align: left;
}

section.media-object {
    margin: 2rem 0 !important;
}

section .nw-cta-small__icon svg {
    height: 50px;
    width: 50px;
    margin-right: 15px;
}

.custom-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 16px;
}

@media screen and (max-width: 1120px) {
    .quiz-intro .intro-content-wrapper {
        grid-template-columns: 1fr;
        /* grid-template-rows: 1fr 1fr; */
    }

    .insurance-master, .insurance-pro, .insurance-rookie {
        grid-template-columns: 1fr;
    }

    .quiz-intro .intro-content-wrapper .intro-content {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        justify-self: center;
        align-self: center;
    }

    .quiz-intro .intro-content-wrapper .intro-image {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        justify-self: center;
    }

    .questions-wrapper .question-wrapper .question-container {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .questions-wrapper .question-wrapper.question-four .question-container {
        grid-template-rows: .5fr 1fr;
    }

    .questions-wrapper .question-wrapper.question-four .question-content,
    .questions-wrapper .question-wrapper.question-four .question-answer,
    .questions-wrapper .question-wrapper.question-four .question-incorrect-answer {
        padding-top: 5rem;
    }
    
    .questions-wrapper .question-wrapper.question-one .question-content,
    .questions-wrapper .question-wrapper.question-one .question-answer,
    .questions-wrapper .question-wrapper.question-one .question-incorrect-answer,
    .questions-wrapper .question-wrapper.question-two .question-content,
    .questions-wrapper .question-wrapper.question-two .question-answer,
    .questions-wrapper .question-wrapper.question-two .question-incorrect-answer,
    .questions-wrapper .question-wrapper.question-three .question-content,
    .questions-wrapper .question-wrapper.question-three .question-answer,
    .questions-wrapper .question-wrapper.question-three .question-incorrect-answer,
    .questions-wrapper .question-wrapper.question-four .question-content,
    .questions-wrapper .question-wrapper.question-four .question-answer,
    .questions-wrapper .question-wrapper.question-four .question-incorrect-answer,
    .questions-wrapper .question-wrapper.question-five .question-content,
    .questions-wrapper .question-wrapper.question-five .question-answer,
    .questions-wrapper .question-wrapper.question-five .question-incorrect-answer,
    .questions-wrapper .question-wrapper.question-six .question-content,
    .questions-wrapper .question-wrapper.question-six .question-answer,
    .questions-wrapper .question-wrapper.question-six .question-incorrect-answer,
    .questions-wrapper .question-wrapper.question-seven .question-content,
    .questions-wrapper .question-wrapper.question-seven .question-answer,
    .questions-wrapper .question-wrapper.question-seven .question-incorrect-answer,
    .questions-wrapper .question-wrapper.question-eight .question-content,
    .questions-wrapper .question-wrapper.question-eight .question-answer,
    .questions-wrapper .question-wrapper.question-eight .question-incorrect-answer {
        grid-column: 1 / 2;
        justify-self: center;
        align-self: center;
    }

    .questions-wrapper .question-wrapper.question-one .question-image,
    .questions-wrapper .question-wrapper.question-two .question-image,
    .questions-wrapper .question-wrapper.question-three .question-image,
    .questions-wrapper .question-wrapper.question-four .question-image,
    .questions-wrapper .question-wrapper.question-five .question-image,
    .questions-wrapper .question-wrapper.question-six .question-image,
    .questions-wrapper .question-wrapper.question-seven .question-image,
    .questions-wrapper .question-wrapper.question-eight .question-image {
        grid-column: 1 / 2;
        justify-self: center;
    }

    .custom-tiles {
        grid-template-columns: 1fr;
    }

}

@media screen and (min-width: 1120px) {
    .insurance-master, .insurance-pro, .insurance-rookie {
        grid-template-columns: 1fr 3fr;
    }
}

@media screen and (max-width: 600px) {
    .quiz-intro .intro-content-wrapper .intro-content {
        min-width: 100%;
        padding: 0 20px;
    }

    .questions-wrapper .question-wrapper .question-container {
        grid-template-rows: .5fr 1fr;
        padding: 0;
    }

    .questions-wrapper .question-wrapper.question-four .question-container {
        grid-template-rows: .25fr 1fr;
    }

    .questions-wrapper .question-wrapper.question-one .question-content,
    .questions-wrapper .question-wrapper.question-one .question-answer,
    .questions-wrapper .question-wrapper.question-one .question-incorrect-answer,
    .questions-wrapper .question-wrapper.question-two .question-content,
    .questions-wrapper .question-wrapper.question-two .question-answer,
    .questions-wrapper .question-wrapper.question-two .question-incorrect-answer,
    .questions-wrapper .question-wrapper.question-three .question-content,
    .questions-wrapper .question-wrapper.question-three .question-answer,
    .questions-wrapper .question-wrapper.question-three .question-incorrect-answer,
    .questions-wrapper .question-wrapper.question-four .question-content,
    .questions-wrapper .question-wrapper.question-four .question-answer,
    .questions-wrapper .question-wrapper.question-four .question-incorrect-answer,
    .questions-wrapper .question-wrapper.question-five .question-content,
    .questions-wrapper .question-wrapper.question-five .question-answer,
    .questions-wrapper .question-wrapper.question-five .question-incorrect-answer,
    .questions-wrapper .question-wrapper.question-six .question-content,
    .questions-wrapper .question-wrapper.question-six .question-answer,
    .questions-wrapper .question-wrapper.question-six .question-incorrect-answer,
    .questions-wrapper .question-wrapper.question-seven .question-content,
    .questions-wrapper .question-wrapper.question-seven .question-answer,
    .questions-wrapper .question-wrapper.question-seven .question-incorrect-answer,
    .questions-wrapper .question-wrapper.question-eight .question-content,
    .questions-wrapper .question-wrapper.question-eight .question-answer,
    .questions-wrapper .question-wrapper.question-eight .question-incorrect-answer {
        padding: 20px;
    }

    .next-steps-wrapper .next-steps-container {
        height: auto;
    }
    
    /* footer {
        margin-top: 3.2rem;
    } */
}