/*============ quiz ===========*/

#quiz {
    margin: 50px 0 0 0;
}

.quiz-container {
    padding: 0!important;
}


#quiz #card {
    background: url('../img/paperstack.png') 50% 0 no-repeat;
    max-width: 700px;
    width: 90%;
    background-size: contain;
    position: relative;
    display: table;
    margin: auto;
    height: 400px;
}

.option-list {
    margin-left: 0;
    padding-right: 0;
    list-style-type: none;
}
.option-list li {
    counter-increment: step-counter;
    display: inline-block;
    line-height: 2.5;
}

.option-list li:not(:last-child) {
    margin-right: 30px;
}

.option-list li:before {
    content: counter(step-counter, upper-alpha);
    font-size: inherit;
    color: #fff;
    font-family: "Gotham";
    font-size: inherit;
    background: #f95400;
    padding: 3px 6px;
    display: inline-block;
    margin-right: 5px;
    line-height: normal;
}


.answers {
    max-width: 800px;
    margin: 0 auto;
}

.sliding-middle-out {
    display: inline-block;
    position: relative;
    padding-bottom: 1px;
}
.sliding-middle-out:after {
    content: '';
    display: block;
    margin: auto;
    height: 2px;
    width: 0px;
    background: transparent;
    transition: width .5s ease, background-color .2s ease;
}
.sliding-middle-out:hover:after {
    width: 100%;
    background: #d75b03;
}
.sliding-middle-out p {
    margin-bottom: 2px;
}

/*
#play .play-btn, #quiz .next-btn, #quiz .prev-btn, #play-again .play-btn  {
    text-transform: uppercase;
    font-family: "Calibri", sans-serif;
    font-size: 18px;
    max-width: 200px;
    padding: 7px 30px;
    height: 40px;
    border: 2px solid #f95400;
    margin: 0 auto;
    position: relative;
    display: inline-block;
    left: 0;
    right: 0;
}
#quiz .fa-chevron-right, #quiz .fa-chevron-left {
    font-size: 18px;
    height: 40px;
    padding: 10px;
    margin: 0 auto;
    border: 2px solid #f95400;
    color: #fff;
    background:#f95400;
    position: relative;
    display: inline-block;
}
*/

#quiz .prev-btn {
    margin-left: -5px;
}
#quiz .next-btn {
    margin-right: -5px;
}
/*
#quiz .prev-btn, #quiz .next-btn, #quiz .see-answer {
    margin-top: 30px;
    margin-bottom: 50px;
}
*/

#play, #play-again {
    margin: 50px 0;
}

#play:hover, #play-again:hover {
    cursor: pointer;
}

#play-again {
    max-width: 400px;
}
.front, .back {
    position: relative;
}

.question-container {
    position: relative;
    height: auto;
}

.uk-flag, .backcard {
    padding: 6%;
    margin-bottom: 40px;
}
#quiz div.response,
#quiz h2.response,
#quiz h2.question {
    position: absolute;
    font-family: "Gotham";
    display: inline-flex;
    top: 43%;
    left: 50%;
    color: #fff;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    line-height: 1.2;
    font-size: 30px;
    }

#quiz h2.question {    
    width:75%;
    }
#quiz div.response {
    display: block;
    top: 50%;
    }
#quiz div.response h2,
#quiz h2.response {
    text-transform: uppercase;
    color: #fff;

}


.prev, .next {
    white-space: nowrap;
}

.option p {
    font-family: "GothamBook";
}

#quiz h2.response {
    color: #f95400;
    font-size: 50px;
    font-family: "Gotham";
}

#quiz div.response h2 {
    color: #f95400;
    font-size: 50px;
    font-family: "Gotham";
}

#quiz div.response p {
    color: #000;
    font-family: "Gotham";
}

.selected {
    background: #ffffff!important;
}



#start::after, #play-again .play-btn::after, .next .next-btn::after  {
    background: #f95400;
    border: 5px solid #f95400;
    bottom: 0;
    color: #fff;
    content: "\f054";
    font-family: "FontAwesome";
    height: 100%;
    line-height: 1.6;
    padding-left: 3px;
    position: absolute;
    right: 0;
    top: 0;
    width: 35px;
}

 .prev .prev-btn::before  {
    background: #f95400;
    border: 5px solid #f95400;
    bottom: 0;
    color: #fff;
    content: "\f053";
    font-family: "FontAwesome";
    height: 100%;
    line-height: 1.6;
    padding-left: 3px;
    position: absolute;
    left: 0;
    top: 0;
    width: 35px;
}

#play .play-btn, #quiz .next-btn, #play-again .play-btn {
    border: 2px solid #f95400;
    display: inline-block;
    font-family: "Calibri",sans-serif;
    font-size: 18px;
    height: 40px;
    margin: 0 35px 0 0;
    max-width: 200px;
    padding: 7px 60px 7px 25px;
    position: relative;
    right: 0;
    text-transform: uppercase;
}
.see-answer {
    border: 2px solid #f95400;
    display: inline-block;
    color: #fff;
    background: #f95400;
    font-family: "Calibri",sans-serif;
    font-size: 18px;
    height: 40px;
    max-width: 300px;
    padding: 7px 25px 7px 25px;
    position: relative;
    text-transform: uppercase;
}

#quiz .prev-btn  {
    border: 2px solid #f95400;
    display: inline-block;
    font-family: "Calibri",sans-serif;
    font-size: 18px;
    height: 40px;
    left: 0;
    margin: 0 0 0 35px;
    max-width: 200px;
    padding: 7px 25px 7px 60px;
    position: relative;
    text-transform: uppercase;
}

#play, #play-again {
    margin: 0 auto;
    position: relative;
}