/******************************************************************************************
Grid 4 Styles
*/

.trivia .row {
    display: inline-block;
}

.trivia .answer.grid_4 {
    min-height: 200px;
    width: 158px !important;
}


/******************************************************************************************
Grid 6 Styles
*/

.trivia .answer.col-md-6 {
    min-height: 201px;
    min-height: 185px;
}


/******************************************************************************************
Question Styles
*/
.trivia .questions {
    position: relative;
    display: block;
}
.trivia .questionWrapper {
    position: relative;
    display: block;
}

.trivia .questionWrapper .question {
    margin-bottom: 20px;
    width: 100%;
    height: 234px;
    background-color: #F3C03A;
    height: auto;
    width: calc(100% + 60px);
    margin-left: -30px;
    padding: 50px 20px;
}

.trivia .question .questionTitle {
    color: #fff !important;
}

.trivia .questionWrapper .question img {
    width: 100%;
    height: auto;
}

.trivia .questionWrapper .questionTitle {
    font-family: 'Muli', sans-serif;
    font-size: 24px;
    line-height: 35px;
    color: #585858;
    text-align: center;
    min-height: 100%;
    display: flex;
    align-items: center;
    width: 80%;
    margin-left: 11%;

}


/******************************************************************************************
Anwsers Styles
*/

.trivia .answersWrapper {
    position: relative;
}


.trivia .col-md-4, .trivia .col-md-6 {
    padding: 10px;
    background-color: #f2f2f2;
    border: 1px solid #dfdfdf;
    margin-bottom: 10px;
    margin: 0px 10px 20px 10px;
}

.trivia .col-md-6 {
   width: 50%;
}

.trivia .col-md-4{
    width: 33.33333333333%;
}

.trivia .answer:hover {
    background-color: #fafafa;
    border: 1px solid #999;
}

.trivia .answer:hover img {
   opacity: .5;
}

.trivia .col-md-4 img, .trivia .col-md-6 img {
    width: 100%;
    height: auto;
}

.trivia .answerTitle {

    font-family: 'Muli', sans-serif;
    font-size: 13px;
    color: #585858;
    text-align: center;
    line-height: 16px;
    margin-top:10px;
}
.trivia .answerTitle .answerTitleOnly {
    margin-top: 0px;
}

.trivia .answer.col-md-6 .answerTitleOnly {

    height: 185px;
    min-height: 185px;
}

/*.trivia .answer.col-md-4 .answerTitleOnly {*/
     /*display: table;*/
     /*width: inherit;*/
     /*height: 200px;*/
    /*min-height: 200px;*/
 /*}*/

.trivia .answer .answerTitleOnly .answerTitle {
    display: block;
    vertical-align: middle;
    font-family: 'Muli', sans-serif;
    font-size: 18px;
    color: #585858;
    text-align: center;
    line-height: 20px;
    overflow: hidden;
    padding: 30px 10px;
}

.trivia .answer.col-md-6 .answerTitleOnly .answerTitle {
    padding: 74px 23px;
}

.trivia .answerMask {
    width: 100%;
    height: inherit;
    /*min-height: 100%;*/
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color:rgba(255, 255, 255, 0.97);
    display: none;
}

.trivia .answerMask.correct > .correctAnswer {
    display: table !important;
    padding: 20px;
}

.trivia .answerMask.wrong > .wrongAnswer {
display: table !important;
padding:20px;
}

.trivia .answerMask .correctAnswer, .answerMask .wrongAnswer {
    width: 75%;
    margin: 0px auto;
    text-align: center;
    vertical-align: middle;
    display: none;
}


.trivia .correctAnswer .textOne, .wrongAnswer .textOne {
    font-size: 30px;
    color: #585858;
    text-align: center;
    line-height: 20px;
    margin-bottom: 20px;
    font-weight: bold;
}

.trivia .correctAnswer .textTwo, .wrongAnswer .textTwo {
    font-size: 24px;
    color: #585858;
    text-align: center;
    line-height: 20px;
    margin-bottom: 20px;
    font-weight: bold;
}

.trivia .correctAnswer .textThree, .wrongAnswer .textThree {
    font-size: 16px;
    color: #585858;
    text-align: center;
    line-height: 20px;
    margin-bottom: 20px;
}

.trivia .correctAnswer .fa-check {
    font-size: 100px;
    color: green;
}

.trivia .wrongAnswer .fa-times {
    font-size: 100px;
    color: red;
}

/******************************************************************************************
Anwsers Styles
*/
.trivia .results {
    position: relative;
    display: block;

}
.trivia .result,
.trivia .result #result25,
.trivia .result #result50,
.trivia .result #result75,
.trivia .result #result100
{
    display:none;
}

.trivia .result #result25.selected,
.trivia .result #result50.selected,
.trivia .result #result75.selected,
.trivia .result #result100.selected
{
    display:block;
}



.trivia .result {
    background: #fff;
    margin-top: 20px;
    padding:20px 20px 0;
    width: calc(100% + 60px);
    margin-left: -30px;
}

.trivia .results p  {
    text-align: center;
    color: #333;

}

.trivia .results p img {
    margin: 0px auto;
    width: auto;
    display: block;
}



.trivia .result h1 {
    color: #fff;
    border: none;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
}

.trivia .result p {
    color: #333;
}

.trivia .results-social {
    margin-left: -20px;
    margin-top: 20px;
    width: 100%;
    width: calc(100% + 40px);
    padding: 20px 0px;

}

.trivia .results-social .title {
    margin-right:5px;
    float: left;
    font-family: 'Muli', sans-serif;
    color:#fff;
    font-size: 29px;
    margin-top: 16px;
    margin-left: 20px;

}

.trivia .results-social .twitterWrap  {
    float: left;
    padding:7px 8px;

}

.trivia .results-social .twitterWrap .fa-twitter {
    color:#fff;
    font-size: 50px;
}

.trivia .results-social .facebookWrap {
    margin-right:5px;
    float: left;
    padding: 7px 10px;
    margin-left: 10px;

}

.trivia .results-social .facebookWrap .fa-facebook-square {
    color:#fff;
    font-size: 50px;
}


@media screen and (max-width: 620px) {
    .answersWrapper .row-eq-height {
        display: block;
    }

    .trivia .answersWrapper .row-eq-height .col-md-4,
    .trivia .answersWrapper .row-eq-height .col-md-6 {
        width: 100%;
    }
}