#quiz {
    background: #f0f6f8;
    width: 960px;
    margin: auto;
    padding: 25px 0;
    min-height: 700px;
    position: relative;
}

#quiz .question {
    display: none;
}

#quiz .question.show {
    display: block;
}

#quiz .count {
    font-size: 32px;
    text-align: center;
    display: none;
    font-weight: 300;
}

#quiz .count.show {
    display: block;
}

#quiz .count .current {
    font-size: 46px;
    font-weight: bold;
}

#quiz .welcome {
    position: relative;
}

#quiz .welcome h2 {
    font-size: 40px;
    text-align: center;
    margin: 40px 0;
}

#quiz .question h3,
#quiz .welcome h3 {
    color: #00b8db;
    text-align: center;
    font-size: 32px;
    font-weight: 400;
    margin: 0;
    line-height: 36px;
}

#quiz .question h3 {
    height: 110px;
    margin: 10px 30px 20px 10px;
}

#quiz .question h3.large {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 500;
}

#quiz .welcome h3 {
    margin: 20px 40px;
}

#quiz .welcome p {
    text-align: center;
    color: #333333;
    font-size: 24px;
}

#quiz .c11-quiz-center {
    text-align: center;
    display: block;
    margin: auto;
}

#quiz .question-wrapper,
.question__wrapper {
    width: 931px;
    height: 356px;
    margin: 10px auto 0 auto;
    position: relative;
    background-image: url(../images/question-bg.png);
}

#quiz .next__btn,
#quiz #btn__preview,
#quiz .clear,
.download {
    background: #333333;
    border-radius: 8px;
    border: 0px;
    margin: auto;
    display: block;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 400;
    padding: 10px 25px;
    /*position: absolute;*/
    /*bottom: 15px;*/
    display: none;
    /*left: 50%;*/
    /*margin-left: -50px;*/
    outline: none;
}

#quiz #btn__preview {
    display: block;
    width: 150px;
    text-decoration: none;
}

.download {
    margin-top: 25px;
    margin-bottom: 25px;
}

#quiz .next__btn.show {
    display: block;
}

#quiz .welcome {}

#quiz .welcome button {
    position: relative;
    margin-top: 40px;
    background: #333333;
    border-radius: 8px;
    border: 0px;
    margin: auto;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 400;
    padding: 10px 25px;
    display: block;
}

#quiz .welcome.hide {
    display: none;
}

.question-wrapper {
    /*padding: 25px;*/
}

.answear__checkbox,
.answear__desc {
    display: inline-block;
    vertical-align: middle;
}

.answear__desc {
    width: 70%;
}

.answear__desc.large__img {
    width: 55%;
}

.answear__desc.large__img label {
    margin-left: 40px;
}

.answear__desc label {
    display: block;
    font-size: 20px;
}

.squaredTwo {
    width: 60px;
    height: 60px;
    position: relative;
    margin: 20px 0 20px 20px;
    background: #d1f2f9;
    _background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    _background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    _box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
}

.description,
.answear__desc {
    vertical-align: middle;
    display: inline-block;
    /*position: absolute;*/
    margin-left: 20px;
    /*margin-right: 20px;*/
}

.description label {
    display: block;
}

.squaredTwo label {
    width: 34px;
    height: 34px;
    cursor: pointer;
    position: absolute;
    left: 13px;
    top: 13px;
    background: #fff;
    _background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);
    _background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
    box-shadow: inset 2px 0px 0px #e6e6e6, inset 0px -2px 0px #e6e6e6;
    border: 2px solid #7d7d7d;
}

.squaredTwo label:after {
    content: '';
    width: 29px;
    height: 24px;
    position: absolute;
    top: 0px;
    left: 5px;
    background: url(../images/checkbox__selected.png);
    border-top: none;
    border-right: none;
    opacity: 0;
}

.squaredTwo label:hover::after {
    opacity: 0.3;
}

.squaredTwo input[type=checkbox] {
    visibility: hidden;
}

.squaredTwo input[type=checkbox]:checked + label:after {
    opacity: 1;
}

button {
    position: relative;
    z-index: 100;
}

.target {
    float: left;
}

#gallery {
    float: right;
}

.dropzone {
    width: 208px;
    height: 290px;
    background: url(../images/question1/answer-wrapper.png) no-repeat 100% 100%;
}

.dropzone.dropzone-bg-2 {
    background: url(../images/question1/answer-wrapper-1.png) no-repeat 100% 100%;
}

#gallery {
    /*float: right;
            width: 35%;*/
    /*min-height: 12em;
    float: left;
    width: 30%;*/
    position: absolute;
    right: 0px;
    width: 200px;
    margin: 20px 0 0 0;
    padding: 0;
}

.gallery.custom-state-active {
    background: #eee;
}

.gallery li {
    width: 100%;
    /*padding: 0.4em;*/
    /*margin: 0 0.4em 0.4em 0;*/
    height: 100px;
    margin: 0;
    padding: 0;
    float: left;
    text-align: left;
    display: block;
}

.answear {
    display: block;
    width: 200px;
    height: 80px;
    text-align: left;
    position: relative;
    /*top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);*/
}

.answear img {
    display: inline-block;
    vertical-align: middle;
}

.answear span {
    /*display: table-cell; */
    vertical-align: middle;
    /* width: 160px; */
    font-weight: bold;
    display: inline-block;
    /*width: 70%;*/
    text-align: left;
    width: 140px;
    font-weight: bold;
}


/*.answear.answer-1.ui-draggable.ui-draggable-handle {
    margin-top: 20px;
}*/

.dropzone .answear {
    text-align: left;
}

.gallery li h5 {
    margin: 0 0 0.4em;
    cursor: move;
}

.gallery li a {
    float: right;
}

.gallery li a.ui-icon-zoomin {
    float: left;
}

.gallery li img {
    /*width: 100%;*/
    cursor: move;
}

#trash {
    float: left;
    /*width: 32%;*/
    /*min-height: 18em;*/
    /*padding: 1%;*/
    /*width: 70%;*/
    margin: 0;
    padding: 0;
    list-style: none;
}

#trash .answear {
    margin-left: 25px;
}

#trash li {
    float: left;
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

#trash h4 {
    font-size: 20px;
    font-weight: 400;
    line-height: 22px;
    position: absolute;
    top: 10px;
    right: 22px;
    width: 40%;
    text-align: left;
}

#trash h4 .ui-icon {
    float: left;
}

#trash .gallery h5 {
    display: none;
}

.droppable.ui-droppable-active {
    background: red;
}

#question-1 .dropzone .answear {
    margin-top: 25px;
}

#question-2 .packshot {
    position: absolute;
    left: 50%;
    margin-left: -50px;
    margin-top: 30px;
}

#question-2 .dropzone {
    display: block;
}

#question-8 .dropzone {
    padding-top: 15px;
}

#question-8 .answear span {
    width: 200px;
    text-align: center;
}

#question-9 #trash h4 {
    font-size: 20px;
    font-weight: 400;
}

#question-9 .dropzone {
    height: 310px;
}

#question-9 #gallery {
    margin-top: 70px;
}

#question-2 #gallery li {
    height: 50px;
    text-align: center;
}

#question-2 .answear span {
    text-align: center;
    font-size: 21px;
    line-height: 21px;
}

#question-2 .dropzone-bg-1 {
    background: url(../images/question2/answer-wrapper-1.png) no-repeat;
    width: 229px;
    height: 89px;
    left: 189px;
    top: 30px;
    position: absolute;
    padding: 25px 0!important;
}

#question-2 .dropzone-bg-2 {
    background: url(../images/question2/answer-wrapper-2.png) no-repeat;
    width: 229px;
    height: 89px;
    left: 188px;
    top: 130px;
    position: absolute;
    padding: 25px 0!important;
}

#question-2 .dropzone-bg-3 {
    background: url(../images/question2/answer-wrapper-3.png) no-repeat;
    width: 273px;
    height: 91px;
    left: 469px;
    top: 60px;
    position: absolute;
    padding: 25px 20px!important;
}

#question-2 #gallery {
    width: 100%;
    position: absolute;
    bottom: 10%;
    min-height: auto;
}

#question-2 #gallery li {
    /*float: left;*/
    width: 24%;
    height: 50px;
    vertical-align: middle;
    float: none;
    display: inline-block;
}

#question-2 #gallery li div {
    text-align: center;
}

#question-4 .answear__desc label,
.answear__desc label {
    display: block;
    font-size: 24px;
    line-height: 27px;
    font-weight: 300;
}

#question-3 .c11-grid,
#question-4 .c11-grid,
#question-5 .c11-grid,
#question-7 .c11-grid {
    background: transparent;
}

#question-3 [class*=answer-],
#question-4 [class*=answer-],
#question-5 [class*=answer-] {
    margin: 25px 0 0;
}

#question-6 .checkbox__list [class*=answer-] {
    margin: 0px 0 15px 20px;
}

#question-6 .checkbox__list {
    padding-top: 30px;
}

#question-6 .checkbox__list .answear__checkbox .squaredTwo {
    margin: 0px 0 0px 20px;
}

#question-7 .question-wrapper {
    padding-top: 50px;
}

#question-7 .answear__desc.large__img label {
    margin-left: 15px;
}

#question-8 #trash {
    width: 100%;
    height: 100%;
    position: absolute;
}

#question-8 .dropzone-bg-1,
#question-8 .dropzone-bg-3 {
    background: url(../images/question8/answear-wrapper-1.png) no-repeat 0 0;
    width: 290px;
    height: 75px!important;
    position: absolute;
}

#question-8 .dropzone-bg-2,
#question-8 .dropzone-bg-4 {
    width: 290px;
    background: url(../images/question8/answear-wrapper-2.png) no-repeat 0 0;
    height: 75px!important;
}

#question-8 .dropzone-bg-3 {
    width: 290px;
    height: 75px!important;
    position: absolute;
    left: 30px;
    top: 184px;
}

#question-8 .dropzone-bg-1 {
    left: 30px;
    top: 30px;
}

#question-8 .dropzone-bg-2 {
    left: 90px;
    top: 90px;
}

#question-8 .dropzone-bg-4 {
    top: 244px;
    left: -223px;
}

#question-8 #gallery li {
    position: absolute;
    width: 230px;
    text-align: center;
    height: 60px;
    background: url(../images/question8/answear-wrapper-hover.png) no-repeat;
    background-size: contain;
}

#question-8 #gallery li .answear {
    width: 240px;
    height: 50px;
    text-align: center;
    margin-top: 7px;
}

#question-8 #gallery li .answear span {
    text-align: center;
}

#question-8 #gallery li:nth-child(1) {
    top: 0px;
    right: 130px;
}

#question-8 #gallery li:nth-child(2) {
    top: 68px;
    right: 30px;
}

#question-8 #gallery li:nth-child(3) {
    top: 132px;
    right: 202px;
}

#question-8 #gallery li:nth-child(4) {
    top: 190px;
    right: 30px;
}

#question-8 #gallery li:nth-child(5) {
    top: 250px;
    right: 150px;
}

#question-9 #trash .dropzone .answear {
    margin-top: 35px;
    margin-left: 40px;
}

.ui-state-highlight.ui-droppable-hover {
    /*background: url(quiz/question1/answer-wrapper-hover.png) no-repeat 100% 100%;*/
}

.ui-state-highlight {
    _background: red;
}

.finish {
    display: none;
}

.finish.show,
.finish .tryAgain.show,
.finish .success.show {
    display: block;
}

.clear.show,
.download.show {
    display: block!important;
}

.finish .success,
.finish .tryAgain {
    display: none;
}

.finish .tryAgain h2,
.finish .success h2 {
    font-size: 46px;
    text-align: center;
    margin: 0;
}

.finish .tryAgain h3,
.finish .success h3 {
    font-size: 32px;
    text-align: center;
    color: #00b8db;
    margin: 0;
}

.finish .tryAgain h3 {
    /*color: #333333;*/
    font-size: 28px;
    line-height: 32px;
    margin: 0 auto 20px;
    width: 80%;
}

.finish .tryAgain h4 {
    font-size: 32px;
    text-align: center;
    margin: 0;
}

.finish .tryAgain.show [class*=help-] {
    display: none;
    width: 60%;
    margin: 20px auto 40px;
}

.finish .tryAgain.show [class*=help-] h3 {
    color: #333;
    font-size: 32px;
}

.finish .tryAgain.show [class*=help-] h3 span {
    font-weight: 300;
    color: #f54c69;
}

.finish .tryAgain.show [class*=help-] p {
    text-align: center;
    font-size: 24px;
    margin: 0;
    font-weight: 300;
}

.finish .tryAgain.show [class*=help-] a {
    color: #333;
    text-decoration: none;
    border-bottom: 2px solid #333;
}

.finish .tryAgain.show [class*=help-] a:hover {
    color: #666;
    border-bottom: 2px solid #666;
}

.finish .tryAgain.show [class*=help-].show {
    display: block;
}

#previewImage {
    display: none;
}


/* QUESTION 9 */


/**/


/**/

#question-9 #trash h4 {
    font-size: 20px;
    font-weight: 400;
    left: 90px;
    top: 5%;
    line-height: 22px;
    color: #333333;
}

#question-9 .dropzone {
    height: 310px;
}


/* cert */

#html-content-holder {
    position: relative;
}

#html-content-preview {}

.quiz__certificate__thumb {
    width: 50%;
    margin: 30px auto;
    text-align: center;
    display: block;
}

.quiz__certificate {
    width: 100%;
}

.cert__person {
    position: absolute;
    width: 100%;
    top: 42%;
    z-index: 100;
    font-size: 60px;
    font-family: "Times New Roman", Georgia, Serif;
    text-align: center;
    color: #00b8db;
    font-style: italic;
}

.cert__person_thumb {
    position: absolute;
    width: 100%;
    top: 51%;
    z-index: 100;
    font-size: 29px;
    font-family: "Times New Roman", Georgia, Serif;
    text-align: center;
    color: #00b8db;
    font-style: italic;
}

.cert__desc {
    position: absolute;
    bottom: 27%;
    text-align: center;
    font-size: 22px;
    width: 100%;
}

.c12__popup {
    background: rgba(255, 255, 255, 0.8);
    position: absolute;
    top: 0;
    left: 0;
    width: 960px;
    height: 100%;
    content: '';
    z-index: 999;
    display: none;
}

.c12__popup__wrapper {
    width: 940px;
    margin-left: 10px;
    margin-top: 10px;
    padding-bottom: 10px;
}

.c12__popup.show {
    display: block;
}

.c12__popup__close {
    background: url(../images/1471016795_close.png);
    background-size: cover;
    width: 48px;
    height: 48px;
    position: absolute;
    border-radius: 50%;
    z-index: 100;
    right: -20px;
    top: -20px;
}