/* QUESTION */
.question-wrapper { margin: 0 0 70px 0; }
.question-wrapper .question { }
.question-wrapper .question .title { font-size: 1.1em !important; font-weight: 400 !important; text-align: left !important; text-transform: none !important; line-height: 150%; }
.question-wrapper .question ul.answers { list-style: outside none none; padding: 0 0 0 10px; margin: 40px 0 0 -20px; overflow: hidden; }
.question-wrapper .question ul.answers li { color: #ffffff; font-size: 1.3em; font-weight: 600; margin: 0 0 15px 0; position: relative; padding-left: 45px; }
.question-wrapper .question p.answers, .answers.filltheblanks { color: #ffffff; font-size: 1.3em !important; text-align: left !important; margin: 40px 0; }
.question-wrapper .question p.explanation { color: #ffffff; font-size: 1.1em !important; text-align: left !important; }
.question-wrapper .question a.arrow-right { display: none; width: 28px; height: 51px; position: absolute; bottom: -80px; right: 0; text-indent: -999px; overflow: hidden; background: url('../image/arrow-right.png') no-repeat scroll 0 0 transparent; }
.question-wrapper .question #question-answer-area { display: none; }
.question-wrapper .question #question-answer-area hr { }
.question-wrapper .question #question-answer-area h3 { color: #ffffff; }
.question-wrapper .question #question-answer-area p { color: #ffffff; padding: 10px; text-align: left; border-radius: 10px; background-color: transparent; }

/* QUESTION - BUTTON */
.question-wrapper .question input.next { display: none; width: 50px; height: 50px; position: absolute; bottom: -80px; right: 0; left: 0; margin: 0 auto; border-radius: 25px; border-color: transparent; overflow: hidden; text-indent: -999px; background-image: url('../image/button-next.png'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-color: transparent; }
.question-wrapper .question input.next.active { display: block; border-style: solid; border-width: 2px; border-color: transparent; background-color: transparent; background-image: url('../image/button-next.png'); }
.question-wrapper .question input.next.correct { display: block; border-style: solid; border-width: 2px; border-color: transparent; background-color: transparent; background-image: url('../image/button-next.png'); }
.question-wrapper .question input.next.wrong { display: block; border-style: solid; border-width: 2px; border-color: transparent; background-color: transparent; background-image: url('../image/button-wrong.png'); }
.question-wrapper .question input.next.left { left: -100px; }
.question-wrapper .question input.next.right { left: 100px; }
.question-wrapper .question input.next:focus { outline: none; }

/* QUESTION - MULTIPLE CHOICE */
.question-wrapper .question ul.multiplechoice { }
.question-wrapper .question ul.multiplechoice li { min-height: 32px; border-radius: 16px; margin-right: 20px; padding: 5px 10px 5px 40px; cursor: pointer; display: block; }
.question-wrapper .question ul.multiplechoice li::before { width: 20px; height: 20px; position: absolute; top: 8px; left: 10px; border-radius: 10px; border-style: solid; border-width: 2px; border-color: transparent; content: ' '; }
.question-wrapper .question ul.multiplechoice li:hover,
.question-wrapper .question ul.multiplechoice li.checked { background-color: transparent; }
.question-wrapper .question ul.multiplechoice li.checked::before { background-color: #00b0df; }
.question-wrapper .question ul.multiplechoice li.correct { border-style: solid; border-width: 2px; border-color: transparent; background-color: transparent; }
.question-wrapper .question ul.multiplechoice li.correct::before { width: 40px; height: 31px; top: 3px; left: 0; border-radius: 0; border: medium none; background: url('../image/button-next.png') no-repeat scroll 0 0 transparent; }

/* QUESTION - FILL THE BLANKS */
.question-wrapper .question p.filltheblanks { }
.question-wrapper .question p.filltheblanks input.complete { max-width: 100%; height: 40px; text-align: center; margin: 10px 0; padding: 5px 40px 5px 10px; border-radius: 20px; border: 2px solid transparent; background-color: transparent; }
.question-wrapper .question p.filltheblanks input.complete.info { border-style: solid; border-width: 2px; border-color: transparent; background-image: url('../image/button-next.png'); background-repeat: no-repeat; background-attachment: scroll; background-position: right center; background-color: transparent; }
.question-wrapper .question p.filltheblanks input.complete.correct { border-style: solid; border-width: 2px; border-color: transparent; background-image: url('../image/button-next.png'); background-repeat: no-repeat; background-attachment: scroll; background-position: right center; background-color: transparent; }
.question-wrapper .question p.filltheblanks input.complete.wrong { border-style: solid; border-width: 2px; border-color: transparent; background-image: url('../image/button-wrong.png'); background-repeat: no-repeat; background-attachment: scroll; background-position: right 10px center; background-color: transparent; }
.question-wrapper .question p.filltheblanks input.complete.full { width: 100%; }
.question-wrapper .question p.filltheblanks input.complete.short { width: auto; }
.question-wrapper .question p.filltheblanks input.complete:focus { outline: none; }

/* QUESTION - SELECT FROM LIST */
.question-wrapper .question p.selectfromlist { }
.question-wrapper .question p.selectfromlist input.complete { max-width: 100%; height: 40px; text-align: center; margin: 10px 0; padding: 5px 40px 5px 10px; border-radius: 20px; border: 2px solid transparent; background-color: transparent; }
.question-wrapper .question p.selectfromlist input.complete.correct { border-style: solid; border-width: 2px; border-color: transparent; background-image: url('../image/button-next.png'); background-repeat: no-repeat; background-attachment: scroll; background-position: right center; background-color: transparent; }
.question-wrapper .question p.selectfromlist input.complete.wrong { border-style: solid; border-width: 2px; border-color: transparent; background-image: url('../image/button-wrong.png'); background-repeat: no-repeat; background-attachment: scroll; background-position: right 10px center; background-color: transparent; }
.question-wrapper .question p.selectfromlist input.complete.full { width: 100%; }
.question-wrapper .question p.selectfromlist input.complete:focus { outline: none; }
.question-wrapper .question .select-list { margin: 30px 0; text-align: center; clear: both}
.question-wrapper .question .select-list a.select-item { height: 40px; color: #ffffff; text-align: center; padding: 8px 20px 0; margin: 10px 5px 10px 0; display: inline-block; border-style: solid; border-width: 2px; border-color: transparent; border-radius: 20px; outline: none; }
.question-wrapper .question .select-list a.select-item:hover { color: #999999; background-color: transparent; text-decoration: none; }
.question-wrapper .question .select-list a.select-item:active { text-decoration: none; }
.question-wrapper .question .select-list a.select-item.active { color: #ffffff; background-color: transparent; text-decoration: none; }
.question-wrapper .question .select-list a.select-item.active:hover { color: #ffffff; }
.question-wrapper .question .select-list a.select-item.correct { }
.question-wrapper .question .select-list a.select-item.wrong { }

/* QUESTION - MULTIPLE CHOICE BLANKS */
.question-wrapper .question .multiplechoiceblanks { width: 100%; }
.question-wrapper .question .multiplechoiceblanks p.baloon { width: 75%; padding: 10px 30px; position: relative; }
.question-wrapper .question .multiplechoiceblanks p.baloon.odd { float: left; border-radius: 30px 30px 30px 0; text-align: left !important; background-color: transparent; margin-left: 10px; }
.question-wrapper .question .multiplechoiceblanks p.baloon.odd::before { position: absolute; bottom: 0; top: auto; left: -20px; border-width: 15px 20px 0 0; border-color: transparent; width: 0; border-style: solid; content: ''; }
.question-wrapper .question .multiplechoiceblanks p.baloon.even { float: right; border-radius: 30px 30px 0 30px; text-align: right !important; background-color: transparent; margin-right: 10px; }
.question-wrapper .question .multiplechoiceblanks p.baloon.even::after { position: absolute; bottom: 0; top: auto; right: -20px; border-width: 15px 0 0 20px; border-color: transparent; width: 0; border-style: solid; content: ''; }
.question-wrapper .question .multiplechoiceblanks input.complete { max-width: 100%; height: 40px; cursor: pointer; text-align: center; margin: 10px 0; padding: 5px 40px 5px 10px; border-radius: 20px; border: 2px solid transparent; background-color: transparent; }
.question-wrapper .question .multiplechoiceblanks input.complete.correct { border-style: solid; border-width: 2px; border-color: transparent; background-image: url('../image/button-next.png'); background-repeat: no-repeat; background-attachment: scroll; background-position: right center; background-color: transparent; }
.question-wrapper .question .multiplechoiceblanks input.complete.wrong { border-style: solid; border-width: 2px; border-color: transparent; background-image: url('../image/button-wrong.png'); background-repeat: no-repeat; background-attachment: scroll; background-position: right 10px center; background-color: transparent; }
.question-wrapper .question .multiplechoiceblanks input.complete.full { width: 100%; }
.question-wrapper .question .multiplechoiceblanks input.complete.short { width: auto; }
.question-wrapper .question .multiplechoiceblanks input.complete:focus { outline: none; }
.question-wrapper .question .multiplechoiceblanks .click-placeholder { display: inline-block; position: relative; background-repeat: no-repeat; background-attachment: scroll; background-position: right 10px center; }
.question-wrapper .question .multiplechoiceblanks .click-placeholder .clicker { position: absolute; left: 0; right: 0; top: 0; bottom: 0; cursor: pointer; z-index: 2; }

/* QUESTION - IMAGE / AUDIO / VIDEO */
.question-wrapper .question .image { text-align: center; }
.question-wrapper .question .image img { max-width: 100%;max-height: 350px; margin: 10px;}
.question-wrapper .question .audio { text-align: center; }
.question-wrapper .question .audio audio { width: 100%; }
.question-wrapper .question .video { text-align: center; }
.question-wrapper .question .video video { max-width: 100%; }
.question-wrapper .question a.warning { color: #ffffff; font-weight: 600; display: block; }
.question-wrapper .question a.warning:hover { text-decoration: none; }
.question-wrapper .question .button-play { width: 75px; height: 75px; text-align: left; position: relative; margin: 40px auto; display: block; border: medium none; text-indent: -999px; overflow: hidden; background: url('../image/button-play.png') no-repeat scroll center center transparent; }
.question-wrapper .question .button-sound { width: 75px; height: 75px; text-align: left; position: relative; margin: 40px auto; display: block; border: medium none; text-indent: -999px; overflow: hidden; background: url('../image/button-sound.png') no-repeat scroll center center transparent; cursor: pointer }

/* QUESTION - HIGHLIGHT (TOOLTIP) */
.question-wrapper .question .highlight { padding: 0 3px; color: #ffffff; background-color: transparent; cursor: pointer; }
.question-wrapper .question .highlight span { display: none; position: absolute; color: #ffffff; background-color: transparent; margin-top: -64px; margin-left: -190px; font-size: 18px; line-height: 1.8; padding: 20px; border-radius: 20px; z-index: 20; }
.question-wrapper .question .highlight span strong { display: block; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: transparent; padding-bottom: 10px; margin-bottom: 10px; }
.question-wrapper .question .highlight:hover span { display: inline; }

/* QUESTION - TAKE A BREAK */
.question-wrapper .question .takeabreak { }
.question-wrapper .question .takeabreak img { max-width: 100%; }
.question-wrapper .question .takeabreak p { margin: 40px 0 0 0; }

/* QUESTION - FLASHCARD */
.question-wrapper .question .card { color: #ffffff; }
.question-wrapper .question .card .front {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a7c7dc+0,85b2d3+100;Blue+Grey+3D */
    background: rgb(167,199,220); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  rgba(167,199,220,1) 0%, rgba(133,178,211,1) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(167,199,220,1) 0%,rgba(133,178,211,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center,  rgba(167,199,220,1) 0%,rgba(133,178,211,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7c7dc', endColorstr='#85b2d3',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.question-wrapper .question .card .front .content { }
.question-wrapper .question .card .front .content .title { color: #ffffff; }
.question-wrapper .question .card .back { background-color: #999999; }
.question-wrapper .question .card .footer { }
.question-wrapper .question .card .footer .button { width: 100px !important; height: 32px; padding: 4px 0; color: #ffffff; font-size: 1em !important; border-style: solid; border-width: 2px; border-color: transparent; background-color: transparent; text-align: center; text-transform: lowercase; display: inline-block !important; border-radius: 16px; cursor: pointer; -webkit-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.question-wrapper .question .card .footer .button:hover { text-decoration: none; }

/* QUESTION - END */
.question-wrapper .question-end { text-align: center; }
.question-wrapper .question-end .title { text-transform: none !important; }
.question-wrapper .question-end .circle-m { margin: 25px auto; }
.question-wrapper .question-end p { color: #ffffff; font-size: 1.2em; text-align: center; }
.question-wrapper .question-end a.continue { color: #ffffff; min-height: 32px; border-radius: 16px; padding: 5px 30px 5px 30px; margin: 35px auto 20px; background-color: transparent; cursor: pointer; display: inline-block; text-transform: lowercase; }
.question-wrapper .question-end a.continue:hover { color: #ffffff; text-decoration: none; }