/* Layout */
html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    font-family: 'Poppins', sans-serif;
    background: #dedede;
    /*background: #000;*/
    /*background: url('../images/background.jpg') no-repeat;
    background-position: top center;
    background-size: cover;*/
    /*padding-top: 30px;
    padding-bottom: 30px;*/
}

/*@media only screen and (min-width: 600px) {
    body {
        padding-bottom: 50px;
    }
}*/

.center {
    display: block;
    margin: 0 auto;
}

.center-img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

.mt-20 {
    margin-top: 20px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-50 {
    margin-top: 50px;
}

.mt-60 {
    margin-top: 60px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-50 {
    margin-bottom: 50px;
}

.mb-60 {
    margin-bottom: 60px;
}

.sub-header {
    font-size: 30px;
    text-align: center;
}

.cta-btn {
    width: 190px;
    height: 40px;
    display: table;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}

.cta-btn span,
.cta-link span {
    color: #fff;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-weight: 500;
}

.alert {
    text-align: center;
    font-size: 15px;
}

.no-select {
    opacity: 0.6;
}

.active {
    display: block;
    opacity: 1;
}

.inactive {
    display: none;
}

.tac {
    text-align: center;
}

/* index - landing page */
#landing-page h1, #landing-page h2, #landing-page h3, #landing-page h4, #landing-page p {
    font-family: 'Poppins', sans-serif;
}

.landing-header-div {
    margin: 0 0 25px;
}

@media only screen and (min-width: 550px) {
    .landing-header-div {
        /*margin: 0 0 35px;*/
        margin: 0 0 55px;
    }
}

.landing-header-div h1 span {
    color: #fff;
    display: block;
}

.landing-header-div h1 span:first-child {
    text-align: center;
    padding: 0;
    font-size: 25px;
    margin: 0 0 10px;
}

.landing-header-div h1 span:first-child + span {
    text-transform: uppercase;
    padding: 0;
    font-weight: 600;
    font-size: 45px;
    line-height: 45px;
    margin: 0;
}

.landing-header-div .underline-header {
    border: 4px solid #fff;
    color: #fff;
    display: inline-block;
    font-weight: 600;
    text-transform: uppercase;
    position: relative;
    padding: 3px 40px;
    margin: 20px 0 20px;
}

.landing-header-div .underline-header:before, .landing-header-div .underline-header:after {
    position: absolute;
    z-index: 1;
    display: inline-block;
}

.landing-header-div .underline-header:before {
    content:url('../images/left-plane-mobile.png');
    left: -64px;
}

@media only screen and (min-width: 550px) {
    .landing-header-div .underline-header:before {
        content:url('../images/left-plane.png');
        left: -230px;
    }
}

.landing-header-div .underline-header:after {
    content:url('../images/right-plane-mobile.png');
    right: -64px;
}

@media only screen and (min-width: 550px) {
    .landing-header-div .underline-header:after {
        content:url('../images/right-plane.png');
        right: -234px;
    }
}

.landing-header-div h1 + h2 {
    margin: 0 0 1px;
}

.landing-header-div h2 {
    color: #fff;
    margin: 0;
    line-height: 27px;
    font-size: 18px;
}

@media only screen and (min-width: 550px) {
    .landing-header-div h2 {
        margin: 0;
        line-height: 40px;
        font-size: 28px;
    }
}

.landing-div {
    background-color: rgba(29,72,134,0.75);
    padding: 50px 10px 60px;
    margin: 25px 0 25px;
}

@media only screen and (min-width: 550px) {
    .landing-div {
        padding: 35px 0 50px;
        margin: 50px 0 50px;
    }
}

.landing-header {
    color: #fff;
    margin: 10px 0 0;
    padding: 3px 0;
    font-weight: 500;
    font-size: 50px;
}

.landing-content-div {
    margin: 0 auto 35px;
    width: 90%;
}

@media only screen and (min-width: 550px) {
    .landing-content-div {
        margin: 0 auto 45px;
        width: 75%;
    }
}

.landing-content-div p {
    color: #fff;
    font-size: 18px;
}

.how-div {
    margin: 0 auto 35px;
    width: 100%;
}

@media only screen and (min-width: 550px) {
    .how-div {
        margin: 0 auto 35px;
        width: 70%;
    }
}

.how-div h2 {
    color: #fff;
    font-size: 20px;
    line-height: 23px;
    margin: 0;
}

.how-div h3 {
    color: #fff;
    font-weight: 300;
    margin: 0;
    line-height: 18px;
    font-size: 14px;
}

@media only screen and (min-width: 550px) {
    .how-div h3 {
        line-height: 24px;
        font-size: 18px;
    }
}

.how-div img {
    max-width: 60%;
}

@media only screen and (min-width: 550px) {
    .how-div img {
        max-width: 100%;
    }
}

.how-inner.first a, .how-inner.first a:hover {
    text-decoration: underline;
    color: #fff;
}

.how-inner.first:before {
    display: none;
    content: "";
}

.how-inner:before {
    position: absolute;
    z-index: 1;
    display: inline-block;
    content: url(../images/instruction-plane-mobile.png);
    top: 16%;
}

@media only screen and (min-width: 550px) {
    .how-inner:before {
        content: url(../images/instruction-plane.png);
        top: 25%;
    }
}

.how-inner.second:before {
    left: -25px;
}

@media only screen and (min-width: 550px) {
    .how-inner.second:before {
        left: -45px;
    }
}

.how-inner.third:before {
    left: -28px;
}

@media only screen and (min-width: 550px) {
    .how-inner.third:before {
        left: -55px;
    }
}

.explore-div {
    color: #fff;
    padding: 0 20px;
}

@media only screen and (min-width: 550px) {
    .explore-div {
        padding: 0;
    }
}

.explore-div p {
    margin: 0;
    font-size: 18px;
    font-weight: 300;
}

.explore-div a {
    color: #f29b18;
    text-decoration: none;
}

.explore-div a:hover {
    text-decoration: underline;
}

#index-btn {
    background: #f29b18;
    border: none;
    border-radius: 8px;
    margin-top: 40px;
    padding: 15px;
    width: 160px;
    height: 35px;
    cursor: pointer;
    display: table;
    margin-left: auto;
    margin-right: auto;
}

#index-btn span {
    color: #fff;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-weight: 500;
}
/* index - landing page end */

/* Question Page */
.logo-img {
    max-width: 100%;
}

.brand-studio {
    float: left;
    padding-left: 0;
}

@media only screen and (min-width: 550px) {
    .brand-studio {
        padding-left: 20px;
    }
}

.sia {
    float: right;
    padding-right: 0;
}

@media only screen and (min-width: 550px) {
    .sia {
        padding-right: 20px;
    }
}

.qns-blk {
    color: #fff;
    border: 2px solid #f29b18;
    display: inline-block;
    font-size: 22px;
    margin: 10px 0 25px;
    padding: 10px 30px;
}

.form-header {
    text-align: center;
    color: #fff;
    font-size: 20px;
}

/* form general style */
#user_form fieldset:not(:first-of-type) {
    display: none;
}

#user_form h3 {
    margin: 0 auto;
    text-transform: none;
    font-weight: 300;
    font-size: 18px;
    line-height: 23px;
    width: 85%;
}

@media only screen and (min-width: 550px) {
    #user_form h3 {
        font-size: 18px;
        line-height: 23px;
        width: 70%;
    }
}

#user_form .form-group {
    padding: 0;
    position: relative;
    margin: 0 0 25px;
}

.form-row .form-group label {
    color: #fff;
}

.form-row .form-control {
    margin: 0 auto;
    width: 85%;
}

@media only screen and (min-width: 550px) {
    .form-row .form-control {
        width: 85%;
    }
}

.form-blk {
    height: auto;
    display: none;
    opacity: 0;
    background-color: rgba(29,72,134,0.75);
    padding: 50px 0 40px;
    margin: 40px 0 40px;
}

@media only screen and (min-width: 550px) {
    .form-blk {
        padding: 50px 0 40px;
        margin: 60px 0 40px;
    }
}

.form-blk.active {
    display: block;
    opacity: 1;
}

.form-wrapper {
    padding: 20px 0 0;
    position: relative;
}

.form-bg {
    text-align: center;
    padding: 40px 0 0;
}

.form-inner {
    position: relative;
    /*overflow: auto;*/
}

.form-control,
.form-control:active,
.form-control:focus {
    color: #000;
}

.tnc__wrap {
    display: table;
    margin: 0 auto;
    padding: 0 35px;
}

@media only screen and (min-width: 550px) {
    .tnc__wrap {
        padding: 0;
    }
}

.tnc__link {
    display: table-cell;
    vertical-align: middle;
    padding-left: 10px;
}

.check__label {
    font-size: 20px;
    display: inline-block;
}

.check__label .pretty {
    margin-right: 5px;
}

.check__label .pretty .state label:before {
    border-color: #f68b1f;
    background: none;
}

.check__label .pretty.p-icon input:checked~.state label:before {
    border-color: #f68b1f;
    background: #f68b1f;
}

.check__label .icon {
    color: #fff;
}

.tnc__link span {
    color: #fff;
}

.tnc__link a {
    color: #f29b18;
}
/* form general style end*/

/* form navigation */
.form-navi-row {
    /*position: absolute;
    top: 20%;*/
}

.btn-div {
    clear: both;
    text-align: center;
    position: relative;
    overflow: auto;
    margin: 20px auto 30px;
    width: 85%;
}

@media only screen and (min-width: 550px) {
    .btn-div {
        width: 65%;
    }
}

.btn-div .next, .btn-div .previous {
    cursor: pointer;
    border: none;
    background: #f29b18;
    position: relative;
    border-radius: 10px;
    font-size: 15px;
    color: #fff;
}

.btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, .show>.btn-info.dropdown-toggle {
    background: #f29b18 !important;
}

.btn-div .next:active, .btn-div .previous:active {
    background: #f29b18;
}

.btn-div .next {
    /*float: right;*/
    /*padding-right: 23px;*/
    height: 40px;
    width: 80px;
}

.btn-div .previous {
    /*float: left;*/
    /*padding-left: 23px;*/
    height: 40px;
    width: 96px;
}

.nav-blk {
    display: inline-block;
    display: inline-block;
    position: relative;
}

/*.nav-blk:before {
    position: absolute;
    font-family: FontAwesome;
    display: block;
    color: #fff;
    font-size: 22px;
    line-height: normal;
    text-align: center;
    z-index: 1;
    height: 25px;
    width: 25px;
}*/

/*.nav-blk.nav-next:before {
    content: "\f105";
    top: 8px;
    right: 6px;
}

.nav-blk.nav-prev:before {
    content: "\f104";
    top: 8px;
    left: 0;
}*/

.nav-blk.nav-prev {
    float: left;
    left: 15px;
}

.nav-blk.nav-next {
    float: right;
    right: 15px;
}

.nav-first.nav-blk {
    float: none;
    right: 0;
}

.city-guide {
    color: #f29b18;
    margin: 30px 0 0;
}

@media only screen and (min-width: 550px) {
    .city-guide {
        margin: 25px 0 0;
    }
}

.city-guide a {
    color: #f29b18;
    text-decoration: none;
    font-size: 13px;
}

@media only screen and (min-width: 550px) {
    .city-guide a {
        font-size: 18px;
    }
}

.city-guide a:hover {
    color: #f29b18;
    text-decoration: underline;
}

.answer__div .pretty .state label:before {
    border-color: #f68b1f;
    background: none;
}

.answer__div .pretty.p-icon input:checked~.state label:before {
    border-color: #f68b1f;
    background: #f68b1f;
}

.col-wrapper {
    overflow: inherit;
    margin: 0 auto;
}

.col-wrapper .column {
    float: none;
    width: auto;
}

@media only screen and (min-width: 550px) {
    .col-wrapper .column {
        float: left;
        width: 50%;
    }
}

/* submit */
.btn-div .submit {
    /*float: right;*/
    cursor: pointer;
    height: 40px;
    width: 95px;
    border: none;
    background: #f29b18;
    position: relative;
    border-radius: 10px;
    font-size: 15px;
    color: #fff;
    /*padding-right: 23px;*/
}

/*.progress-div.trait-progress {
    padding-left: 0;
}*/

/*.nav-blk.submit-blk:before {
    display: none;
}*/

/* form navigation end */

.msg-box {
    color: #fff;
    margin: 40px 0 30px;
}

/* Form End*/
/* Question Page End */

/* result */
#result_bd {
    font-family: 'Poppins', sans-serif;
}

#result_bd .bgimg-div {
    background-image: url("../images/background/bg-7.jpg");
}

.result-div {
    position: relative;
    z-index: 1;
    background-color: rgba(29,72,134,0.75);
    margin: 0 0 30px;
    padding: 40px 10px 35px;
    top: 0;
}

@media only screen and (min-width: 550px) {
    .result-div {
        margin: 0 0 80px;
        padding: 20px 0 60px;
        top: 0;
    }
}

.logo-row {
    margin-top: 30px;
}

@media only screen and (min-width: 550px) {
    .logo-row {
        margin-top: 0;
    }
}

.result-blk {
    position: relative;
}

.result-row {
    height: auto;
}

.result-row img {
    max-width: 100%;
}

.result-header {
    color: #fff;
    text-align: center;
    margin: 30px 0 25px;
    font-size: 30px;
}

@media only screen and (min-width: 550px) {
    .result-header {
        font-size: 30px;
    }
}

.return-blk {
    text-align: center;
    color: #fff;
}

.return-blk h3 {
    font-size: 20px;
    margin: 25px 0 10px;
}

.return-blk h3 + h3 {
    margin: 5px 0 10px;
}

.share-div {
    display: block;
}

.share-header {
    text-align: center;
    color: #fff;
    font-size: 20px;
    font-weight: 300;
    margin: 40px 0 10px;
}

.share-main {
    text-align: center;
}

.qn-result {
    text-align: center;
    color: #fff;
    font-size: 24px;
}

.qOne.correct, .qTwo.correct, .qThree.correct {
    text-align: center;
    color: #fff;
    font-size: 20px;
}

.qOne.correct {
    margin: 28px 0 0;
}

.qTwo.correct {
    margin: 10px 0 0;
}

.qThree.correct {
    margin: 10px 0 0;
}

.qOne.wrong, .qTwo.wrong, .qThree.wrong {
    text-align: center;
    color: #fff;
    display: inline;
    font-size: 20px;
}

.qOne.wrong {
    margin: 28px 0 0;
}

.qTwo.wrong {
    margin: 10px 0 0;
}

.qThree.wrong {
    margin: 10px 0 0;
}

.wrong span {
    color: #ff0000;
}

.correct_ans {
    color: #fff;
    font-size: 20px;
    display: block;
    margin: 8px 0 0 0;
}

@media only screen and (min-width: 550px) {
    .correct_ans {
        display: inline;
        margin: 0 0 0 5px;
    }
}

.qn-result-blk {
    text-align: center;
    margin: 20px 0 0;
}

.correct_ans span + span {
    margin-left: 5px;
}

.best, .return, .read-more {
    color: #fff;
    font-size: 18px;
    text-align: center;
}

.best {
    margin: 25px 0 0;
}

.return {
    margin: 15px 0 0;
}

.read-more {
    margin: 30px 0 0;
}

.article-link {
    display: block;
    text-align: center;
    margin: 15px 0 0;
}

.article-link a {
    display: inline-block;
    color: #f29b18;
    font-size: 19px;
    font-weight: 300;
}

.error-div-one,
.error-div-two {
    text-align: center;
}

.error-div-one {
    margin: 50px 0 0;
}

.error-div-one h2 {
    font-size: 40px
}

.error-div-two {
    margin: 25px 0 0;
}

.error-div-two a {
    color: #f9052c;
    font-size: 22px;
    text-decoration: underline;
}
/* Result end */

/* Parsley */
input.parsley-success,
select.parsley-success,
textarea.parsley-success {
    color: #468847;
    background-color: #DFF0D8;
    border: 1px solid #D6E9C6;
}

input.parsley-error,
select.parsley-error,
textarea.parsley-error {
    color: #B94A48;
    background-color: #F2DEDE;
    border: 1px solid #EED3D7;
}

.parsley-errors-list {
    margin: 8px 0 0;
    padding: 0;
    list-style-type: none;
    font-size: 0.9em;
    line-height: 0.9em;
    opacity: 0;
    font-style: italic;
    transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
}

.parsley-errors-list.filled {
    opacity: 1;
}

/* progress */
.progress-div {
    width: 360px;
    margin: 0 auto;
    text-align: center;
    height: auto;
    padding-left: 12px;
}

.progress-div .circle {
    display: inline-block;
    background: none;
    width: 22px;
    height: 22px;
    border-radius: 40px;
    border: 2px solid #f29b18;
    margin-right: 5px;
    position: relative;
}

.progress-div .circle .label {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 40px;
    margin: 0;
    position: absolute;
    top: -1px;
    left: -1px;
}

/* Progress */
.progress-div .circle.on .label {
    background: #f29b18;
}
/* Progress End */

/* New */
.answer__div {
    display: block;
    text-align: left;
    color: #fff;
    margin: 35px auto 0;
}

.limit {
    display: none;
    color: #fff;
    text-align: center;
    font-size: 20px;
}

.limit.active {
    display: block;
}

.limit p {
    margin: 0;
}

.bgimg-div {
    position: fixed;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}

.qns_img {
    border: 3px solid #fff;
    display: block;
    width: 100%;
    max-width: 60%;
    margin: 0 auto 25px;
}

@media only screen and (min-width: 550px) {
    .qns_img {
        max-width: 60%;
        margin: 0 auto 25px;
    }
}

.photo__div {
    margin: 0 auto;
    color: #fff;
    width: 85%;
}

@media only screen and (min-width: 550px) and (max-width: 768px) {
    .photo__div {
        width: 65%;
    }
}

@media only screen and (min-width: 769px) {
    .photo__div {
        width: 85%;
    }
}

.photo__div p {
    margin: 0 auto;
    width: 85%;
}

@media only screen and (min-width: 550px) and (max-width: 768px) {
    .photo__div {
        width: 70%;
    }
}

@media only screen and (min-width: 769px) {
    .photo__div {
        width: 70%;
    }
}

#photo {
    width: 270px;
    margin: 20px auto 30px;
}

#photo .form-control, #photo .form-control:active, #photo .form-control:focus {
    color: #000;
}

#photo_caption {
    width: 90%;
    padding: 10px;
}

#error1, #error2{
    display:none;
    color:#fff;
}

.charNum {
    margin: 20px 0 0;
}

/* google recaptcha */
.g-recaptcha {
    margin: 30px auto 0;
    width: auto;
    height: auto;
    text-align: -webkit-center;
    text-align: -moz-center;
    text-align: -o-center;
    text-align: -ms-center;
}

#recaptch-alert {
    padding: 0;
    margin: 7px 0 0;
    border: none;
    border-radius: 0;
    font-size: 12px;
    line-height: normal;
    font-style: italic;
    text-align: center;
}

#recaptcha-alert {
    color: #fff;
    font-style: italic;
    font-size: 15px;
    margin: 2px 0 0;
}

.parsley-required, .parsley-custom-error-message, .parsley-errors-list {
    color: #fff;
}

/* Terms & Conditions */
#tnc__page .bgimg-div {
    background-image: url("../images/background/bg-1.jpg");
}

.tnc__blk {
    background-color: rgba(29,72,134,0.75);
    margin: 25px 0 25px;
    padding: 50px 40px 60px;
}

.tnc__blk h2 {
    color: #fff;
    text-align: center;
    font-size: 25px;
    margin: 0 0 15px;
}

.tnc__blk ol {
    color: #fff;
    padding: 0;
    margin: 0 0 0 6px;
}

@media only screen and (min-width: 550px) {
    .tnc__blk ol {
        margin: 0 0 0 18px;
    }
}

.tnc__blk ol li {
    font-size: 13px;
}

@media only screen and (min-width: 550px) {
    .tnc__blk ol li {
        font-size: 15px;
    }
}

.tnc__blk a, .tnc__blk a:hover {
    color: #f29b18;
    text-decoration: underline;
}

.photo-error, .reg-error {
    margin: 15px 0 0;
    font-size: 16px;
    text-align: center;
    color: #ff0000;
}

.loading {
    margin: 5px 0 0;
    text-align: center;
    display: none;
    opacity: 0;
}

.loading.active {
    display: block;
    opacity: 1;
}

.loading i {
    color: #fff;
    font-size: 45px;
}

.loading h3 {
    margin: 7px 0 0;
    font-size: 14px;
    color: #fff;
    text-align: center;
    width: 100%;
}

.landing-logos-row {
    margin-bottom: 20px;
}

@media only screen and (min-width: 550px) {
    .landing-logos-row {
        margin-bottom: 30px;
    }
}

.how-div {
    display: none;
}

.how-div.active {
    display: block;
}

#how-btn {
    margin: 15px auto 0;
    cursor: pointer;
}

#how-btn span {
    color: #fff;
    font-weight: 400;
    text-decoration: underline;
    font-size: 13px;
}

.points-div {
    margin: 20px auto 0;
    width: 90%;
}

@media only screen and (min-width: 550px) {
    .points-div {
        width: 65%;
    }
}

.points-div p {
    text-align: center;
    color: #fff;
    font-size: 13px;
}


/* Media Queries Reference */
/*@media only screen and (min-width: 768px) {

    .platform-filter,
    .segment-filter {
        float: left;
        width: 50%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {

    .platform-filter,
    .segment-filter {
        float: left;
        width: 50%;
    }
}