body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#wrapper {
    overflow: hidden;
}

#container {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 100vh;
    padding: 0 0 55px !important;
}

.quiz-dropshadow {
    text-shadow: -1px 0 rgba(0, 0, 0, .2),
                  0 1px rgba(0, 0, 0, .2),
                  1px 0 rgba(0, 0, 0, .2),
                 0 -1px rgba(0, 0, 0, .2),
                 0px 4px 5px rgba(0, 0, 0, .2);
}

/*.question-wrapper .btn:hover,*/
/*.question-wrapper .btn:focus {*/
    /*text-decoration: none;*/
    /*box-shadow: none;*/
    /*color: #ffffff;*/
/*}*/

/*.quiz .startX,*/
/*.quiz .question {*/
    /*background: transparent;*/
    /*padding: 50px 100px;*/
    /*padding: none;*/
    /*text-align: left;*/
/*}*/

.question-wrapper .radio label,
.question-wrapper .checkbox label {
    padding-left: 35px;
    font-size: 16px;
    font-weight: 700;
}

.question-wrapper .checkbox label:before {
    content: "";
    display: none;
    width: 0px;
    height: 0px;
    margin-right: 0px;
    position: absolute;
    left: 0;
    bottom: 0px;
    background: none;
}

.question-wrapper .number .container {
    padding-left: 15px;
}


/*!* Overrides *!*/
/*.quiz input[type="text"],*/
/*.quiz input[type="number"],*/
/*.quiz input[type="email"] {*/
    /*background: none;*/
    /*color: #333;*/
    /*border-width: 0 0 2px 0;*/
    /*border-color: #fff;*/
    /*font-size: 18px;*/
    /*margin-bottom: 10px;*/
    /*padding: 0px 20px;*/
    /*line-height: 40px;*/
    /*height: 40px;*/
    /*width: 100%;*/
    /*max-width: 500px;*/
/*}*/

/*!* Customize the label (the container) *!*/
.quiz .container {
    display: block;
    position: relative;
    padding-left: 0px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*!* Hide the browser's default checkbox *!*/
.quiz .container input[type=checkbox],
.quiz .container input[type=radio] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/*!* Create a custom checkbox *!*/
.quiz .checkmark,
.quiz .checkmark-r {
    pointer-events: none;
    position: absolute;
    top: -2px;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/*!* Create a custom radio button *!*/
.quiz .checkmark-r {
    border-radius: 50%;
}

/*!* On mouse-over, add a grey background color *!*/
.quiz .container:hover input ~ .checkmark,
.quiz .container:hover input ~ .checkmark-r {
    background-color: #ccc;
}

/*!* When the checkbox is checked, add a blue background *!*/
.quiz .container input:checked ~ .checkmark,
.quiz .container input:checked ~ .checkmark-r {
    background-color: #2196F3;
}

/*!* Create the checkmark/indicator (hidden when not checked) *!*/
.quiz .checkmark-r:after,
.quiz .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/*!* Show the checkmark when checked *!*/
.quiz .container input:checked ~ .checkmark-r:after,
.quiz .container input:checked ~ .checkmark:after {
    display: block;
}

/*!* Style the indicator (dot/circle) *!*/
.container .checkmark-r:after {
    top: 8px;
    left: 8px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: white;
}

/*!* Style the checkmark/indicator *!*/
.quiz .container .checkmark:after {
    left: 10px;
    top: 6px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.wrapper-holder:before {
    content: "";
    position: absolute;
    left: -350px;
    right: -280px;
    top: -330px;
    height: 74%;
    background: transparent;
    -webkit-transform: rotate(26deg);
    -ms-transform: rotate(26deg);
    transform: rotate(26deg);
    z-index: -1;
}

@media (min-width: 376px) {
    .wrapper-holder:before {
        height: 57%;
        top: -190px;
    }
}
@media (min-width: 769px) {
    .wrapper-holder:before {
        top: -230px;
        height: 68%;
        right: -350px;
    }
}
@media (min-width: 1025px) {
    .wrapper-holder:before {
        height: 82%;
        top: -360px;
    }
}
@media (min-width: 1201px) {
    .wrapper-holder:before {
        top: -460px;
        height: 87%;
        right: -360px;
    }
}

/*.question-wrapper .btn.btn-quiz-prev,*/
/*.question-wrapper .btn.btn-quiz-next,*/
/*.btn.btn-quiz-submit {*/
    /*font-size: 14px;*/
    /*line-height: 17px;*/
    /*box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .2);*/
    /*-webkit-transition: all .6s ease;*/
    /*transition: all .6s ease;*/
    /*background: #000;*/
    /*border: none;*/
    /*!*width: 100%;*!*/
    /*height: 35px;*/
    /*color: #fff;*/
    /*outline: none;*/
    /*box-shadow: none;*/
    /*padding: 0 5px;*/
    /*font-weight: 700;*/
    /*border-radius: 5px;*/
/*}*/

/*.question-wrapper label {*/
    /*display: inline-block;*/
    /*cursor: pointer;*/
    /*position: relative;*/
    /*margin-right: 15px;*/
    /*font-size: 13px;*/
    /*color: #333;*/
    /*width: 100%;*/
/*}*/

/*.quiz .input-wrapper {*/
    /*box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .2);*/
    /*position: relative;*/
    /*background: #fff;*/
    /*border-radius: 5px;*/
    /*padding: 0 18px 0 18px;*/
    /*height: 45px;*/
    /*margin-bottom: 17px;*/
/*}*/

/*.quiz .input-wrapper input[type="text"],*/
/*.quiz .input-wrapper input[type="email"],*/
/*.quiz .input-wrapper input[type="date"] {*/
    /*font-size: 13px;*/
    /*line-height: 16px;*/
    /*background: none;*/
    /*border: none;*/
    /*outline: none;*/
    /*box-shadow: none;*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*color: #333;*/
    /*padding: 0;*/
/*}*/

/*.quiz input[type="text"],*/
/*.quiz input[type="date"],*/
/*.quiz input[type="tel"],*/
/*.quiz input[type="email"],*/
/*.quiz input[type="search"],*/
/*.quiz input[type="password"],*/
/*.quiz textarea {*/
    /*-webkit-appearance: none;*/
    /*-webkit-border-radius: 0;*/
    /*box-sizing: border-box;*/
    /*border: 1px solid #999;*/
    /*padding: .4em .7em;*/
/*}*/

/***********************************************/

.quiz {
    max-width: 100%;
}
.quiz .start,
.quiz .question {
    text-align: center;
    padding: 50px 0px;
}
/*.quiz .devider {*/
/*background-color: #fef6a6;*/
/*max-width: 100px;*/
/*height: 5px;*/
/*margin: 0 auto;*/
/*}*/
.quiz .input-wrapper {
    text-align: left;
    margin: 0 auto;
    width: 360px;
    max-width: 100%;
}
.quiz .error-message {
    height: 0px;
    overflow: hidden;
    display: block;
    font-size: 12px;
    color: #ff4141;
    padding: 5px 18px 0;
    background: #fff;
    position: relative;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    transition: height 0.3s ease;
    top: 5px;
}
.quiz .error-message.show {
    height: 21px;
}

.quiz input[type="text"],
.quiz input[type="number"],
.quiz input[type="email"] {
    background: no-repeat;
    color: #000;
    border-width: 0 0 2px 0;
    border-color: #ffffff;
    font-size: 13px;
    margin-bottom: 10px;
    padding: 0px 20px;
    line-height: 40px;
    height: 40px;
    width: 100%;
    max-width: 360px;

    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .2);
    background: #fff;
    border-radius: 5px;
    padding: 0 18px 0 18px;
}
.quiz input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #000;
    opacity: 1; /* Firefox */
}

.quiz input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #000;
}

.quiz input::-ms-input-placeholder { /* Microsoft Edge */
    color: #000;
}
.quiz h1 {
    font-size: 60px;
    font-size: 35px;
    line-height: 60px;
    line-height: 35px;
    text-transform: uppercase;
    margin: 30px 0;
    margin: 0 0 19px;

    position: relative;
    letter-spacing: 3.3px;
    font-weight: 700;
}
.quiz h2 {
    font-size: 40px;
    line-height: 45px;
    text-transform: uppercase;
    margin: 25px 0;
}
@media (max-width: 770px) {
    .quiz h2 {
        font-size: 30px;
        line-height: 36px;
    }
}
@media (max-width: 377px) {
    .quiz h2 {
        font-size: 25px;
        line-height: 32px;
    }
}
.quiz .logo {
    position: absolute;
    top: 20px;
    right: 20px;
}
.quiz .logo small {
    color: #fff;
    text-align: center;
    display: block;
    font-size: 12px;
    white-space: nowrap;
}
.quiz .logo img {
    width: 100%;
    max-width: 100px;
    margin: 0 auto;
}
.quiz p {
    font-size: 22px;
    margin: 15px 0;
}
.quiz h1,
.quiz h2,
.quiz p {
    color: #fff;
}
.question-wrapper {
    display: none;
}
.question-wrapper:first-child {
    display: block;
}
.question-wrapper .answers {
    padding: 13px 0px;
    overflow: hidden;
    max-width: 395px;
    margin: 0 auto;
}
.question-wrapper .btn-quiz-wrapper {
    max-width: 360px;
    margin: 0 auto;
}
.question-wrapper .btn {
    min-width: 70px;
    width: 48%;
    border-radius: 5px;
    display: inline-block;
    margin-top: 10px;
    line-height: 30px;
    padding: 5px 30px;
    border: none;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    transition-property: box-shadow;
    transition-duration: .4s;
    transition-delay: 0s;
    /*transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);*/
    transition-timing-function: linear;
}
.question-wrapper .btn.btn-quiz-big {
    min-width: 140px;
    width: 100%;
}

.question-wrapper .answers {
    text-align: left;
}

.question-wrapper .answers li {
    margin-bottom: 9px;
    position: relative;
}

/*.question-wrapper .checkbox input[type=radio], .question-wrapper input[type=checkbox] {*/
    /*display: none;*/
/*}*/

.question-wrapper label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    margin-right: 15px;
    font-size: 13px;
    color: #ffffff;
    width: 100%;
}

.question-image {
    max-width: 100%;
    width: 360px;
    margin: 0 auto;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
}

/*.question-wrapper .checkbox label {*/
    /*padding-left: 35px;*/
/*}*/

/*.question-wrapper .checkbox label:before {*/
    /*content: "";*/
    /*display: inline-block;*/
    /*width: 22px;*/
    /*height: 22px;*/
    /*margin-right: 10px;*/
    /*position: absolute;*/
    /*left: 0;*/
    /*bottom: 1px;*/
    /*background: url(/template/renda/images/checkbox_normal2.png) no-repeat;*/
/*}*/

/*.question-wrapper .checkbox input[type=radio]:checked + label:before, .question-wrapper .checkbox input[type=checkbox]:checked + label:before {*/
    /*background: url(/template/renda/images/checkbox_selected2.png);*/
/*}*/