html,
body {
    height: 100%;
    width: 100%;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: "Roboto", "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", BlinkMacSystemFont, -apple-system, "Segoe UI", "Microsoft Yahei", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-weight: 400;
    margin: 0;
}

a {
    -webkit-transition: all 0.35s;
    -moz-transition: all 0.35s;
    transition: all 0.35s;
    color: #474157;
}

a:hover,
a:focus {
    color: #474157;
}

hr {
    max-width: 100px;
    margin: 25px auto 0;
    border-width: 1px;
    border-color: rgba(34, 34, 34, 0.1);
}

hr.light {
    border-color: white;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 200;
    letter-spacing: 1px;
}

p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
}


#mainbody {
    position: relative;
    width: 100%;
    min-height: auto;
    overflow-y: hidden;
    background: #f1f6fd;
    color: #474157;
    height: calc(100vh - 61px);
}

#mainbody > .container > .text-center {
    text-align: center;
    padding: 350px 0 50px;
    position: relative;
    height: 100vh;
}

#mainbody > .container > .text-center h1 {
    font-size: 50px;
    font-weight: bold;
    color: #171347
}

#mainbody > .container > .text-center > a {
    background: #fdcc52;
    background: -webkit-linear-gradient(#fdcc52, #fdc539);
    background: linear-gradient(#fdcc52, #fdc539);
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 300px;
    margin-top: 20px;
    padding: 10px 45px;
    font-size: 14px;
    text-decoration: none;
}

@media (max-height: 500px) {
    #mainbody {
        height: inherit;
    }
}

@media (min-width: 768px) {
    .navbar-default {
        background-color: transparent;
        border-color: transparent;
    }

    #mainbody .index-text {
        text-align: left;
    }
}

@media (max-width: 767px) {

    #mainbody > .container > .text-center {


        padding: 130px 0 0 0;
        height: calc(100vh - 261px);
    }

    #mainbody > .container > .text-center > h1 {


        font-size: 50px;
        margin-bottom: 20px;
    }
}

.footer {
    background-color: #222222;
    padding: 20px 0;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
}

.footer p {
    font-size: 14px;
    margin: 0;
}
        /*
 * CSS styles for surveyspotter.com
 * *  *
 *
 * Copyright Cognispere / Allgroove LTD
 *
 * Author: Overmore Group 
*/

        /* --------------------------------------------------------------
  #UNIVERSAL-STYLES
-------------------------------------------------------------- */

        html,
        body {
            height: 100%;
        }

        body {
            padding-top: 60px;
            font-family: 'Lato', sans-serif;
            color: #333;
        }

        .rank {
            background: #158a73;
            width: 40px;
            line-height: 40px;
            text-align: center;
            /*border: 1px solid #158a73;*/
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            -ms-border-radius: 100%;
            -o-border-radius: 100%;
            border-radius: 100%;
            color: #fff;
            font-size: 18px;
            font-weight: 700;
            margin-right: 8px;
            position: relative;
            bottom: 5px;
        }

        @media only screen and (min-width : 768px) {
            body {
                padding-top: 70px;
            }

            .rank {
                line-height: 32px;
            }
        }

        @media only screen and (min-width : 1200px) {
            .rank {
                line-height: 40px;
            }
        }

        /* --------------------------------------------------------------
  #ACCORDIONS
-------------------------------------------------------------- */
        .accordion-group:last-child {
            margin-bottom: 0px;
        }

        .accordion-group .panel {
            border-radius: 2px;
            border: 0;
        }

        .accordion-group .panel:not(:last-child) {
            margin-bottom: 30px;
        }

        .accordion-group .panel>.panel-heading {
            background-color: #fff;
            padding: 20px 25px;
        }

        .accordion-group .panel>.panel-heading:hover,
        .accordion-group .panel>.panel-heading:focus {
            cursor: pointer;
        }

        .accordion-group .panel>.panel-heading h4 a {
            color: #158a73;
        }

        .accordion-group .panel-heading.collapsed h4 a {
            color: #333;
        }

        .accordion-group .accordion-toggle:after {
            display: block;
            font-style: normal;
            font-variant: normal;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            font-family: "Font Awesome 5 Free", "FontAwesome";
            font-weight: 600;
            float: right;
            content: '\f068';
        }

        .accordion-group .panel-heading.collapsed .accordion-toggle:after {
            content: '\f067';
        }

        .accordion-group .panel-default>.panel-heading+.panel-collapse>.panel-body {
            border-top: 0;
        }

        .accordion-group .panel-body {
            padding: 15px 25px;
        }

        /* --------------------------------------------------------------
  #ALIGNMENT
-------------------------------------------------------------- */
        /**VERTICLE**/
        .align-items-start {
            -ms-flex-align: start !important;
            align-items: flex-start !important;
        }

        .align-items-center {
            -ms-flex-align: center !important;
            align-items: center !important;
        }

        .align-items-end {
            -ms-flex-align: end !important;
            align-items: flex-end !important;
        }

        .align-content-center {
            align-content: center !important;
        }

        /**JUSTIFY-CONTENT**/
        .justify-content-center {
            -ms-flex-pack: center !important;
            justify-content: center !important;
        }

        /* --------------------------------------------------------------
  #BACKGROUND-COLOURS
-------------------------------------------------------------- */
        .bg-blue {
            background-color: #00A6FB !important;
        }

        .bg-dark {
            background-color: #222 !important;
        }

        .bg-grey {
            /*background-color: #fafafa !important;*/
            background-color: #f3f5f9 !important;
        }

        .bg-green {
            background-color: #158a73 !important;
        }

        .bg-red {
            background-color: #ec140e !important;
        }

        .bg-white {
            background-color: #fff !important;
        }

        .bg-yellow {
            background-color: #fff568 !important;
        }

        .bg-pink-gradient {
            background: #df4f71;
            background: -webkit-linear-gradient(to left, #df4f71, #F9DFE5);
            background: linear-gradient(to left, #df4f71, #F9DFE5);
        }

        .grey-section {
            background-color: #fafafa;
            border-top: 1px solid #dcdce4;
            border-bottom: 1px solid #dcdce4;
        }

        .overlay:before {
            content: "";
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            position: absolute;
        }

        .overlay-black:before {
            background-color: rgba(0, 0, 0, .7);
            content: "";
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            position: absolute;
        }

        .overlay-green:before {
            background-color: rgba(21, 138, 115, .7);
            content: "";
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            position: absolute;
        }

        /* --------------------------------------------------------------
  #BACKGROUND-IMAGE
-------------------------------------------------------------- */
        .bg-image {
            -webkit-background-size: cover !important;
            -moz-background-size: cover !important;
            -o-background-size: cover !important;
            background-size: cover !important;
        }

        /* --------------------------------------------------------------
  #BORDERS
-------------------------------------------------------------- */
        .border-top {
            border-top: 1px solid #dcdce4 !important;
        }

        .border-right {
            border-right: 1px solid #dcdce4 !important;
        }

        .border-bottom {
            border-bottom: 1px solid #dcdce4 !important;
        }

        .border-left {
            border-left: 1px solid #dcdce4 !important;
        }

        /* --------------------------------------------------------------
  #BUTTONS
-------------------------------------------------------------- */
        .btn {
            border-radius: 2px;
        }

        .btn-main {
            padding: 6px 24px;
            font-weight: 700;
        }

        .btn-big {
            font-size: 16px;
            padding: 10px 40px;
        }

        .btn-xl {
            font-weight: 700;
            font-size: 22px;
            letter-spacing: 0.5px;
            padding: 10px 0;
        }

        .btn-green-light {
            background-color: #d7f1ec;
            color: #158a73;
        }

        .btn-green-light:focus,
        .btn-green-light:hover,
        .btn-green {
            background-color: #158a73;
            color: #fff;
        }

        .btn-green:hover,
        .btn-green:focus {
            background-color: #12715F;
            color: #fff;
        }

        .btn-green-outline {
            background-color: transparent;
            border: 1px solid #158a73;
            color: #158a73;
        }

        .btn-green-outline:hover,
        .btn-green-outline:focus {
            background-color: #158a73;
            color: #fff;
        }

        .btn-pink {
            background-color: #df4f71;
            color: #fff !important;
        }

        .btn-pink:hover,
        .btn-pink:focus {
            background-color: #CB4867;
        }

        .btn-white {
            background-color: #fff;
            color: #333;
        }

        .btn-white:focus,
        .btn-white:hover {
            background-color: #f5f5f5;
        }

        .btn-white-outline {
            border-color: #fff;
            background-color: transparent;
            color: #fff;
        }

        .btn-white-outline:hover,
        .btn-white-outline:focus {
            background-color: #fff;
            color: #333;
        }

        @media only screen and (min-width : 768px) {
            .btn-xl {
                padding: 16px 46px;
            }
        }

        /* --------------------------------------------------------------
  #CTA-SECTION
-------------------------------------------------------------- */
        .cta-section {
            background: url(/images/bgs/cta-bg-small.jpg) no-repeat center center;
        }

        .cta-section::before {
            background-color: rgba(21, 138, 115, .7);
            /** Green Overlay **/
            content: "";
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            position: absolute;
        }

        .cta-section .title {
            margin-bottom: 40px;
        }

        /* --------------------------------------------------------------
  #DISPLAY
-------------------------------------------------------------- */
        .d-block {
            display: block;
        }

        .d-flex {
            display: flex !important;
        }

        .d-inline {
            display: inline !important;
        }

        .d-inline-block {
            display: inline-block !important;
        }

        @media only screen and (min-width : 768px) {
            .d-flex-sm {
                display: flex;
            }
        }

        @media only screen and (min-width : 992px) {
            .d-flex-md {
                display: flex;
            }

            .row.is-flex {
                display: flex;
                flex-wrap: wrap;
            }

            .row.is-flex>[class*='col-'] {
                display: flex;
                flex-direction: column;
            }
        }

        @media only screen and (min-width : 1200px) {
            .d-flex-lg {
                display: flex;
            }
        }

        /* --------------------------------------------------------------
  #FEATURES
-------------------------------------------------------------- */
        .features {
            margin-top: 40px;
        }

        .features img {
            margin-bottom: 10px;
        }

        .features h4 {
            font-weight: 500;
        }

        .features p {
            padding: 10px;
            color: #555;
            line-height: 24px;
        }

        @media only screen and (min-width : 768px) {
            .features {
                margin-top: 40px;
            }
        }

        @media only screen and (min-width : 1200px) {
            .features {
                margin-top: 40px;
            }

        }

        /* --------------------------------------------------------------
  #FORM
-------------------------------------------------------------- */
        .main-hero .form {
            border-radius: 4px;
            padding: 15px;
            margin-top: 10px;
        }

        .form .row.gutter .pr {
            padding-right: 8px;
        }

        .form .row.gutter .pl {
            padding-left: 8px;
        }

        .form h1 {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 40px;
        }

        label {
            font-weight: normal;
            color: #3b3f44;
        }

        .form .input-lg {
            font-size: 14px;
            padding: 17px 10px 17px 10px;
        }

        .form-control {
            /*background-color: #f7f7f7;*/
            border-color: #dcdce4;
            -webkit-box-shadow: none !important;
            box-shadow: none !important;
            border-radius: 2px;
        }

        .form-control:focus {
            background-color: #fff;
            /*border-color: #158a73;*/
            border-color: #333;
        }

        .form-control[disabled],
        .form-control[readonly],
        fieldset[disabled] .form-control {
            background-color: #edeeee;
            border-color: #dcdce4;
            opacity: 1;
        }

        .form-text {
            display: block;
            margin-top: 8px;
        }

        .checkbox {
            font-size: 13px;
        }

        .custom-radio,
        .custom-checkbox {
            padding-left: 20px;
            position: relative;
            display: block;
        }

        .custom-radio input,
        .custom-checkbox input {
            opacity: 0;
            position: absolute;
            z-index: 1;
            cursor: pointer;
            margin-left: 0px !important;
        }

        .custom-radio input:checked+label::before,
        .custom-checkbox input:checked+label::before {
            border-color: #333;
            background-color: #333;
        }

        .custom-radio input:checked+label::after,
        .custom-checkbox input:checked+label::after {
            content: '';
            display: inline-block;
            position: absolute;
            width: 7px;
            height: 7px;
            left: 5px;
            top: 7px;
            margin-left: -20px;
            border: 1px solid #ffffff;
            border-radius: 50%;
            background-color: #ffffff;
        }

        .custom-radio label,
        .custom-checkbox label {
            display: inline-block;
            position: relative;
            padding-left: 5px;
        }

        .custom-radio label::before,
        .custom-checkbox label::before {
            content: '';
            display: inline-block;
            position: absolute;
            width: 20px;
            height: 20px;
            left: 0;
            top: 2px;
            margin-left: -20px;
            border: 1px solid #cccccc;
            border-radius: 50%;
            background-color: #fff;
        }

        .custom-radio.disabled label,
        .custom-checkbox.disabled label {
            color: #cccccc;
        }

        .custom-radio.disabled label::before,
        .custom-checkbox.disabled label::before {
            opacity: .54;
            border-color: #cccccc;
        }

        .custom-checkbox input:checked+label::before {
            border-color: #158a73;
            background-color: #158a73;
        }

        .custom-checkbox input:checked+label::after {
            content: "\f00c";
            font-family: "Font Awesome 5 Free", "FontAwesome";
            font-size: 13px;
            color: #fff;
            top: 0;
            left: 1px;
            border-color: transparent;
            background-color: transparent;
        }

        .custom-checkbox label::before {
            border-radius: 2px;
        }

        .custom-radio-button {
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 4px;
            background-color: #ffffff;
        }

        .custom-radio-button input {
            width: 100%;
            height: 100%;
            margin: 0;
            left: 0;
            top: 0;
        }

        .custom-radio-button-highlight {
            border: 1px solid #333;
        }

        @media only screen and (min-width : 768px) {
            .main-hero .form {
                padding: 15px;
            }

            .form .row.gutter .pr {
                padding-right: 15px;
            }

            .form .row.gutter .pl {
                padding-left: 15px;
            }
        }

        @media only screen and (min-width : 1200px) {
            .form .input-lg {
                font-size: 16px;
            }
        }

        /* --------------------------------------------------------------
  #FOOTER
-------------------------------------------------------------- */
        .footer .footer-img img {
            max-width: 300px;
            margin-bottom: 20px;
        }

        .footer .footer-links li {
            display: block;
            padding: 10px;
        }

        .footer .footer-links li a {
            color: #828282;
            font-weight: 700;
        }

        .footer .footer-links li a:hover,
        .footer .footer-links li a:focus {
            color: #fff;
        }

        .footer hr {
            border: 1px solid #3e3e3e;
            margin-top: 40px;
            margin-bottom: 40px;
        }

        .footer-bottom {
            background-color: #151414;
            padding: 10px;
        }

        .footer-bottom .copyright-text {
            color: #828282;
        }

        @media only screen and (min-width : 768px) {
            .footer .footer-img img {
                margin-bottom: 40px;
            }

            .footer .footer-links li {
                display: inline-block;
                padding: 0px 10px;
            }
        }

        /* --------------------------------------------------------------
  #HERO
-------------------------------------------------------------- */
        .hero-img {
            background: url(/images/bgs/hero-bg.jpg) no-repeat center center;
        }

        @media only screen and (min-width : 768px) {
            .hero-padding {
                padding: 0 4%;
            }
        }

        @media only screen and (min-width : 992px) {
            .hero-padding {
                padding: 0 12%;
            }
        }

        /* --------------------------------------------------------------
  #ICONS
-------------------------------------------------------------- */
        .fa-trophy {
            color: #FFBA08 !important;
        }

        .feather {
            vertical-align: middle;
        }

        /* --------------------------------------------------------------
  #IMAGE
-------------------------------------------------------------- */
        .rounded-img {
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
        }

        /* --------------------------------------------------------------
  #LABELS
-------------------------------------------------------------- */
        .main-label {
            padding: 6px;
        }

        /* --------------------------------------------------------------
  #LEGAL-PAGES
-------------------------------------------------------------- */
        .legal-page .heading {
            margin-bottom: 25px;
        }

        .legal-page .effective-date {
            display: inline-block;
            font-size: 12px;
            line-height: 1;
            text-align: center;
            color: #808f96;
            margin: auto;
            padding: 8px 10px;
            border-width: 1px;
            border-style: solid;
            border-color: rgb(178, 190, 209);
            border-radius: 2px;
        }

        /* --------------------------------------------------------------
  #LINKS
-------------------------------------------------------------- */

        .green-link {
            color: #158a73;
        }

        /* --------------------------------------------------------------
  #LIST-GROUP
-------------------------------------------------------------- */
        .main-list-group .list-group-item {
            padding: 10px 20px;
        }

        /* --------------------------------------------------------------
  #MARGIN
-------------------------------------------------------------- */
        .m-0 {
            margin: 0 !important;
        }

        .mt-0 {
            margin-top: 0px !important;
        }

        .mt-10 {
            margin-top: 10px !important;
        }

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

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

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

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

        .mb-0 {
            margin-bottom: 0px !important;
        }

        .mb-10 {
            margin-bottom: 10px !important;
        }

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

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

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

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

        .my-0 {
            margin-top: 0px !important;
            margin-bottom: 0px !important;
        }

        .mx-0 {
            margin-left: 0px !important;
            margin-right: 0px !important;
        }

        .my-auto {
            margin-top: auto;
            margin-bottom: auto;
        }

        .mx-auto {
            margin-left: auto;
            margin-right: auto;
        }

        /* --------------------------------------------------------------
  #MEDIA-IMAGES
-------------------------------------------------------------- */
        .media-images {
            margin: 30px 0px 0px;
            padding: 0;
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }

        .media-images__image {
            margin: 16px 20px;
        }

        .media-images.media-images--config-width .media-images__image {
            width: 6.25rem;
        }

        .media-images.media-images--config-height .media-images__image {
            height: 1.5rem;
        }

        @media only screen and (min-width : 768px) {
            .media-images {
                margin: 30px 20px 0px;
            }

            .media-images__image {
                margin: 16px 30px;
            }
        }

        @media only screen and (min-width : 992px) {
            .media-images__image {
                margin: 16px 50px;
            }
        }

        /* --------------------------------------------------------------
  #NAVIGATION-BAR
-------------------------------------------------------------- */
        .mainNav {
            background-color: #fff;
            border-bottom: 0;
            margin-bottom: 0;
        }

        .mainNav .navbar-brand {
            padding: 0px;
            height: 60px;
        }

        .mainNav .navbar-brand>img {
            height: 100%;
            padding: 18px;
            width: auto;
        }

        .mainNav .nav>li>a {
            font-size: 16px;
            color: #333;
            padding-top: 20px;
            padding-bottom: 20px;
        }

        .mainNav .nav>.active {
            background-color: transparent;
        }

        .mainNav .navbar-nav>.active>a,
        .mainNav .navbar-nav>.active>a:focus,
        .mainNav .navbar-nav>.active>a:hover {
            background-color: transparent;
            color: #158a73;
        }

        .mainNav .navbar-nav>.open>a,
        .mainNav .navbar-nav>.open>a:focus,
        .mainNav .navbar-nav>.open>a:hover {
            /*color: #158a73;*/
            background-color: transparent;
        }

        .mainNav a i {
            padding-right: 10px;
        }

        .mainNav a .feather {
            padding-right: 12px;
            vertical-align: middle;
            height: 16px;
        }

        /** DROPDOWN **/
        .mainNav .dropdown-menu {
            border: 0;
        }

        .mainNav .dropdown-menu:after {
            content: "";
            position: absolute;
            top: -10px;
            right: 30px;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            border: 10px solid #fff;
            border-right-color: transparent;
            border-bottom-color: transparent;
            -webkit-box-shadow: -10px -9px 23px 1px rgba(0, 0, 0, .1);
            box-shadow: -10px -9px 23px 1px rgba(0, 0, 0, .1);
        }

        .mainNav .dropdown-menu>li>a {
            padding: 20px;
        }

        .mainNav .nav-profile-avatar {
            height: 24px;
            width: auto;
        }

        .mainNav .dropdown .txt {
            margin-left: 10px;
            display: block;
        }

        .mainNav .dropdown-arrow {
            height: 15px;
            width: auto;
            margin-left: 3px;
        }

        /** MOBILE-TOGGLE **/
        .mainNav .navbar-toggle {
            margin: 13px 18px 13px 0;
        }

        @media only screen and (max-width : 767px) {
            .mainNav .navbar-btn .btn {
                display: block;
                margin-right: 15px;
                margin-left: 15px;
                margin-top: 20px;
                margin-bottom: 20px;
            }

            /** DROPDOWN **/
            .mainNav .caret {
                float: right;
            }

            .mainNav .navbar-nav .open .dropdown-menu {
                margin-left: 30px;
                padding-left: 5px;
                border-left: 1px solid #dcdce4;
            }
        }

        @media only screen and (min-width : 768px) {
            .mainNav .navbar-brand {
                height: 70px;
            }

            .mainNav .navbar-brand>img {
                padding: 20px;
            }

            .mainNav .navbar-btn:last-child {
                padding-right: 0px;
            }

            .mainNav .navbar-btn {
                font-size: 16px;
                padding: 18px 15px;
                margin-top: 0;
                margin-bottom: 0;
            }

            /** DROPDOWN **/
            .mainNav .dropdown-menu {
                width: 15em;
            }

            .mainNav .dropdown-menu>li>a {
                font-size: 14px;
            }

            .mainNav .nav-profile-avatar {
                height: 20px;
                width: auto;
            }

            .mainNav .dropdown .txt {
                display: none;
            }
        }

        /* --------------------------------------------------------------
  #PADDING
-------------------------------------------------------------- */
        .p-0 {
            padding: 0 !important;
        }

        .pl-0 {
            padding-left: 0 !important;
        }

        .pl-10 {
            padding-left: 10px !important;
        }

        .pl-20 {
            padding-left: 20px !important;
        }

        .pl-30 {
            padding-left: 30px !important;
        }

        .pl-40 {
            padding-left: 40px !important;
        }

        .pl-50 {
            padding-left: 50px !important;
        }

        .pr-0 {
            padding-right: 0 !important;
        }

        .pr-10 {
            padding-right: 10px !important;
        }

        .pr-20 {
            padding-right: 20px !important;
        }

        .pr-30 {
            padding-right: 30px !important;
        }

        .pr-40 {
            padding-right: 40px !important;
        }

        .pr-50 {
            padding-right: 50px !important;
        }

        .pt-0 {
            padding-top: 0px !important;
        }

        .pt-10 {
            padding-top: 10px !important;
        }

        .pt-20 {
            padding-top: 20px !important;
        }

        .pt-30 {
            padding-top: 30px !important;
        }

        .pt-40 {
            padding-top: 40px !important;
        }

        .pt-50 {
            padding-top: 50px !important;
        }

        .pb-0 {
            padding-bottom: 0px !important;
        }

        .pb-10 {
            padding-bottom: 10px !important;
        }

        .pb-20 {
            padding-bottom: 20px !important;
        }

        .pb-30 {
            padding-bottom: 30px !important;
        }

        .pb-40 {
            padding-bottom: 40px !important;
        }

        .pb-50 {
            padding-bottom: 50px !important;
        }

        /* --------------------------------------------------------------
  #PANELS
-------------------------------------------------------------- */
        .main-panel,
        .small-panel {
            border: 0;
            position: relative;
            margin-bottom: 30px;
        }

        .panel-body {
            position: relative;
            padding: 20px;
        }

        @media only screen and (min-width : 768px) {
            .main-panel .panel-body {
                padding: 30px;
            }
        }

        /* --------------------------------------------------------------
  #POSITIONS
-------------------------------------------------------------- */
        .position-absolute {
            position: absolute !important;
        }

        .position-relative {
            position: relative !important;
        }

        .position-static {
            position: static !important;
        }

        /* --------------------------------------------------------------
  #PROGRESS-BAR
-------------------------------------------------------------- */
        .main-progress {
            -webkit-box-shadow: none;
            box-shadow: none;
            border-radius: 30px;
            background-color: #fff;
            height: 10px;
            margin-bottom: 15px;
        }

        .main-progress .progress-bar {
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            -webkit-box-shadow: none;
            box-shadow: none;
        }

        /* --------------------------------------------------------------
  #SIZING
-------------------------------------------------------------- */
        .h-100 {
            height: 100% !important;
        }

        .w-100 {
            width: 100% !important;
        }

        /* --------------------------------------------------------------
  #SHADOWS
-------------------------------------------------------------- */
        .shadow-fx-light {
            box-shadow: 0px 4px 25px -10px rgba(0, 22, 89, 0.2);
            -webkit-box-shadow: 0px 4px 25px -10px rgba(0, 22, 89, 0.2);
            -moz-box-shadow: 0px 4px 25px -10px rgba(0, 22, 89, 0.2);
        }

        .shadow-fx {
            box-shadow: 0px 8px 44px -10px rgba(0, 22, 89, 0.2);
            -webkit-box-shadow: 0px 8px 44px -10px rgba(0, 22, 89, 0.2);
            -moz-box-shadow: 0px 8px 44px -10px rgba(0, 22, 89, 0.2);
        }

        /* --------------------------------------------------------------
  #SPACING
-------------------------------------------------------------- */
        .spacing-sm,
        .spacing-md,
        .spacing-lg {
            padding-top: 30px;
            padding-bottom: 30px;
        }

        @media only screen and (min-width : 768px) {
            .spacing-md {
                padding-top: 60px;
                padding-bottom: 60px;
            }

            .spacing-lg {
                padding-top: 80px;
                padding-bottom: 80px;
            }
        }

        @media only screen and (min-width : 1200px) {
            .spacing-lg {
                padding-top: 100px;
                padding-bottom: 100px;
            }
        }

        /* --------------------------------------------------------------
  #TABS
-------------------------------------------------------------- */
        .main-tab-content {
            background-color: #fff;
            padding: 20px;
        }

        @media only screen and (min-width : 768px) {
            .main-tab-content {
                padding: 30px;
            }
        }

        /* --------------------------------------------------------------
  #TEXT
-------------------------------------------------------------- */
        .bigger-text {
            font-size: 18px;
        }

        .h1,
        .h2,
        .h3,
        .h4,
        .h5,
        .h6,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin-top: 0px;
        }

        .font-light {
            font-weight: 300;
        }

        .font-normal {
            font-weight: 400;
        }

        .font-medium {
            font-weight: 500;
        }

        .font-bold {
            font-weight: 700;
        }

        .font-black {
            font-weight: 900;
        }

        .heading,
        .heading-xl {
            font-size: 28px;
            margin-bottom: 10px;
        }

        .sub-title {
            font-size: 16px;
            line-height: inherit;
        }

        .title {
            font-weight: 700;
            font-size: 18px;
        }

        .text-dark {
            color: #333 !important;
        }

        .text-green {
            color: #158a73 !important;
        }

        .text-white {
            color: #fff !important;
        }

        @media only screen and (min-width: 768px) {
            .heading-xl {
                font-size: 32px;
            }

            .bigger-text {
                line-height: 32px;
            }
        }

        @media only screen and (min-width : 992px) {
            .heading {
                font-size: 42px;
            }

            .heading-xl {
                font-size: 46px;
            }

            .sub-title {
                font-size: 22px;
            }

            .title {
                font-size: 30px;
            }
        }

        @media only screen and (min-width : 1400px) {
            .heading-xl {
                font-size: 52px;
            }
        }

        /* --------------------------------------------------------------
  #HOME-PAGE
-------------------------------------------------------------- */
        .home-page .main-hero.hero-image {
            background: url(/images/bgs/home-bg.jpg) no-repeat center center;
        }

        .home-page .main-hero.hero-image:before {
            /*background-color: rgba(0,0,0,.7);*/
            /*Black Overlay*/
            background-color: rgba(21, 138, 115, .7);
            /** Green Overlay **/
            content: "";
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            position: absolute;
        }

        .home-page .main-hero .heading,
        .home-page .main-hero .sub-title {
            text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
        }

        .home-page .main-hero .sub-title {
            margin-bottom: 20px;
        }

        .home-page .main-hero .features-steps {
            color: #fff;
        }

        .home-page .main-hero .features-steps .content:not(:last-child) {
            margin-bottom: 15px;
        }

        .home-page .main-hero .features-steps .content img {
            height: 25px;
        }

        .home-page .main-hero .features-steps .content p {
            font-size: 16px;
            margin-bottom: 0px;
            margin-left: 15px;
        }

        .home-page .main-hero .disclaimer {
            margin-top: 20px;
        }

        .home-page .main-hero .disclaimer p {
            margin-bottom: 0px;
        }

        .gender-box {
            display: inline-block;
            width: 110px;
            margin: 0 5px;
        }

        @media only screen and (min-width : 992px) {
            .home-page2 .main-hero .row-flex {
                display: flex;
            }

            .home-page2 .main-hero .heading {
                font-size: 50px;
            }

            .home-page2 .main-hero .form {
                margin-left: 15px;
            }
        }

        .home-page .steps-section .features .content {
            padding: 30px;
        }

        .home-page .steps-section .features .content p {
            margin-left: 20px;
            font-size: 16px;
            margin-bottom: 0px;
            max-width: 200px;
            text-align: left;
        }

        @media only screen and (min-width : 768px) {
            .home-page .steps-section .features .content {
                padding: 30px 0px;
            }
        }

        @media only screen and (min-width : 992px) {
            .home-page .steps-section .features .content {
                padding: 30px;
            }
        }

        .home-page .info-section .info-img {
            height: 230px;
        }

        .home-page .info-section .info-img-1 {
            background: url(/assets/img/info-1.jpg) no-repeat center center;
        }

        .home-page .info-section .info-img-2 {
            background: url(/assets/img/info-2.jpg) no-repeat center center;
        }

        @media only screen and (min-width : 768px) {
            .home-page .info-section .info-img {
                height: 330px;
            }

            .home-page .info-section .info-img-1 {
                margin-left: 40px;
            }

            .home-page .info-section .info-img-2 {
                margin-right: 40px;
            }
        }

        .faq-section .sub-title {
            margin-bottom: 30px;
        }

        /* --------------------------------------------------------------
  #LOGIN-PAGE
-------------------------------------------------------------- */
        .login-page .row.custom {
            display: flex;
            -ms-flex-pack: center !important;
            justify-content: center !important;
        }

        .login-page .left {
            display: none;
        }

        .login-page .right {
            padding-top: 90px;
            padding-bottom: 90px;
        }

        @media only screen and (min-width : 768px) {
            .login-page .right {
                min-height: 100vh;
                display: grid;
                padding-top: 0;
                padding-bottom: 0;
            }

            .login-page .footer,
            .login-page .footer-bottom {
                display: none;
            }

            .login-page .right>.row {
                -ms-flex-pack: center !important;
                justify-content: center !important;
                display: flex;
            }
        }

        @media only screen and (min-width : 992px) {
            .login-page .left {
                min-height: 100vh;
                display: flex;
            }
        }

        /* --------------------------------------------------------------
  #OFFERS-PAGE
-------------------------------------------------------------- */
        .survey-img {
            margin: 0 50px;
            margin-bottom: 25px;
        }

        .offers-page .offer-wall-section .offer-panel h3 {
            font-size: 18px;
            font-weight: 700;
        }

        .offers-page .offer-wall-section .description-section .offer-description:not(:last-child) {
            margin-bottom: 25px;
        }

        .offers-page .offer-wall-section .offer-description {
            display: flex;
        }

        .offers-page .offer-wall-section .offer-description .tick {
            height: 25px;
            width: auto;
            margin-right: 15px;
        }

        @media only screen and (min-width : 768px) {
            .offers-page .offer-panel .panel-body {
                padding: 40px;
            }

            .offers-page .offer-wall-section .survey-img {
                padding: 20px;
                border: 1px solid #dcdce4;
                border-radius: 4px;
                margin: 0 !important;
            }

            .offers-page .offer-wall-section .offer-panel h3 {
                font-size: 24px;
            }

            .offers-page .offer-wall-section .offer-description {
                -ms-flex-align: center !important;
                align-items: center !important;
            }
        }

        @media only screen and (min-width : 992px) {
            .offers-page .offer-wall-section .offer-description {
                -ms-flex-align: center !important;
                align-items: center !important;
            }
        }

        /* --------------------------------------------------------------
  #PROFILE-SECTION
-------------------------------------------------------------- */
        .profile-info-section {
            text-align: center;
        }

        .main-progress {
            width: 70%;
            margin-left: auto;
            margin-right: auto;
        }

        .profile-info-section .points-info {
            margin-bottom: 25px;
        }

        .profile-info-section .points-info .label {
            font-size: 18px;
            font-weight: normal;
            padding: 6px 24px;
            background-color: rgba(0, 0, 0, 0.05);
            color: #333;
        }

        .profile-info-section .points-info .label .fa-trophy {
            padding-right: 8px;
        }

        @media only screen and (min-width : 768px) {
            .profile-info-section {
                text-align: inherit;
            }

            .main-progress {
                width: 50%;
                margin-left: 0;
            }

            .profile-info-section .points-info {
                float: right;
                margin-bottom: 0px;
            }
        }

        /* --------------------------------------------------------------
  #SURVEYS-PAGE
-------------------------------------------------------------- */
        .surveys-page .surveys-section .survey-panel {
            -webkit-transition: all 0.2s ease-in-out;
            -moz-transition: all 0.2s ease-in-out;
            -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
        }

        .surveys-page .surveys-section .survey-panel:hover {
            transform: scale(1.05);
        }

        .surveys-page .surveys-section .survey-panel img {
            height: 48px;
            width: auto;
        }

        .surveys-page .surveys-section .recommended-panel {
            background: url(/images/bgs/survey-center/recommended-bg-sm.jpg) no-repeat center center;
        }

        .surveys-page .surveys-section .survey-info .far,
        .surveys-page .surveys-section .survey-info .fas {
            padding-right: 8px;
        }

        .surveys-page .surveys-section .recommended-panel .btn {
            display: block;
        }

        .surveys-page .surveys-section .min5-panel {
            background: url(/images/bgs/survey-center/time-bg-1.jpg) no-repeat center center;
        }

        .surveys-page .surveys-section .min10-panel {
            background: url(/images/bgs/survey-center/time-bg-2.jpg) no-repeat center center;
        }

        .surveys-page .surveys-section .min20-panel {
            background: url(/images/bgs/survey-center/time-bg-3.jpg) no-repeat center center;
        }

        .surveys-page .surveys-section .timed-panel:before {
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
        }

        .surveys-page .surveys-section .min5-panel:before {
            background-color: rgba(10, 62, 166, 0.73);
        }

        .surveys-page .surveys-section .min10-panel:before {
            background-color: rgba(240, 93, 94, 0.73);
        }

        .surveys-page .surveys-section .min20-panel:before {
            background-color: rgba(244, 116, 59, 0.73);
        }

        .surveys-page .surveys-section .timed-panel h4 {
            margin-bottom: 30px;
            line-height: 1.4;
            font-weight: bold;
        }

        .surveys-page .surveys-section .timed-panel .points-info {
            margin-bottom: 30px;
        }

        .surveys-page .surveys-section .timed-panel .btn {
            display: block;
        }

        @media only screen and (min-width : 768px) {
            .surveys-page .surveys-section .recommended-panel {
                background: url(/images/bgs/survey-center/recommended-bg-md.jpg) no-repeat center center;
            }

            .surveys-page .surveys-section .survey-panel img {
                height: 28px;
                width: auto;
            }
        }

        @media only screen and (min-width: 992px) {
            .surveys-page .surveys-section .survey-panel img {
                height: 48px;
                width: auto;
            }

            .surveys-page .surveys-section .recommended-panel {
                background: url(/images/bgs/survey-center/recommended-bg-lg.jpg) no-repeat center center;
            }

            .surveys-page .surveys-section .recommended-panel .content {
                max-width: 600px;
            }

            .surveys-page .surveys-section .recommended-panel .btn {
                display: inline-block;
            }

            .surveys-page .surveys-section .timed-panel h4 {
                margin-bottom: 80px;
            }

            .surveys-page .surveys-section .timed-panel .points-info {
                margin-bottom: 0px;
            }

            .surveys-page .surveys-section .timed-panel .btn {
                margin-left: auto;
                display: inline-block;
            }
        }

        /* --------------------------------------------------------------
  #REWARDS-PAGE
-------------------------------------------------------------- */
        .reward-card {
            margin-bottom: 30px;
        }

        .reward-card img {
            -webkit-transition: all 0.2s ease-in-out;
            -moz-transition: all 0.2s ease-in-out;
            -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
        }

        .reward-card img:hover {
            transform: scale(1.05);
        }

        .reward-card h4 {
            margin-bottom: 3px;
        }

        /* --------------------------------------------------------------
  #ACCOUNT-PAGE
-------------------------------------------------------------- */
        .account-nav-pills>li>a {
            border-radius: 0;
            color: #4a4a4a;
            font-weight: 400;
        }

        .account-nav-pills>li>a img {
            height: 16px;
            vertical-align: text-bottom;
            padding-right: 8px;
        }

        .account-nav-pills>li.active>a,
        .account-nav-pills>li.active>a:focus,
        .account-nav-pills>li.active>a:hover {
            background-color: #f9fafc;
            border-left: 3px solid #158a73;
            color: #158a73;
            font-weight: 700;
        }

        .account-section .panel-header {
            padding: 25px 20px;
        }

        .account-section .panel-header h4 {
            font-size: 21px;
        }

        .account-section .profile-avatar {
            height: 80px;
            width: auto;
        }

        .account-page .account-section .form-group {
            margin-bottom: 20px;
        }

        .account-page .account-section .panel-section .edit-section {
            margin-bottom: 15px;
        }

        .account-page .account-section .panel-section h4 {
            font-size: 16px;
        }

        .text-content ul,
        .text-content ol {
            padding-left: 10px;
            text-align: left;
            font-size: 16px;
            display: inline-block;
        }

        @media only screen and (min-width : 768px) {
            .account-page .account-section {
                min-height: 800px;
            }

            .account-page .account-section .panel-section .edit-section {
                margin-bottom: 30px;
            }

            .gender-box {
                margin: 0 15px;
            }

            .text-content ul,
            .text-content ol {
                padding-left: 0;
                font-size: 18px;
                list-style-position: inside;
            }
        }

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

        @media only screen and (min-width : 992px) {}

        @media only screen and (min-width : 1200px) {}

        
        .custom-radio-button {
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #ffffff;
        }

        .custom-radio-button-highlight {
            border: 2px solid #158a73;
            background-color: #d7f1ec;
            padding: 9px;
        }

        .custom-radio-button {
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            display: flex;
        }


        .radio.custom-radio label {
            padding-left: 0px !important;
            width: 100%;
            height: 100%;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .radio.custom-radio label img {
            height: 90px;
            width: 60px;
        }

        .custom-radio input:checked+label::after {
            content: url(/fonts/check-solid.svg);
            fill: #fff;
            filter: invert(100%);
            font-size: 10px;
            color: #fff;
            top: 0px;
            left: 0px;
            display: block;
            font-style: normal;
            font-variant: normal;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            font-family: "Font Awesome 5 Free", "FontAwesome";
            font-weight: 600;
            position: absolute;
            background-color: rgb(203, 115, 139);
            padding: 3.5px;
            width: 22px;
            height: 22px;
            border-bottom-left-radius: 3px;
            border-radius: 50%;
            line-height: 19px;
        }

        .text-center-mobile {
            text-align: center;
        }

        .disclaimer {
            padding-top: 10px;
        }

        #faq-accordion div {
            cursor: pointer;
        }

        .tc-checkbox {
            font-size: 13px;
            margin-bottom: 6px;
        }

        .text-content ul,
        .text-content ol {
            margin-top: 5px;
        }

        .text-content li {
            font-size: 16px;
            line-height: 18px;
            margin-bottom: 10px;
        }

        @media only screen and (min-width : 768px) {
            .match-sizes .col-sm-6 {
                margin-bottom: -500px;
                padding-bottom: 500px;
            }

            .match-sizes {
                overflow: hidden;
            }

            .info-img {
                height: 100%;
            }

            .info-img-1 {
                background: url(/images/info-1.jpg) no-repeat center center !important;
                -webkit-background-size: cover !important;
                -moz-background-size: cover !important;
                -o-background-size: cover !important;
                background-size: cover !important;
            }

            .info-img-2 {
                background: url(/images/info-2.jpg) no-repeat center center !important;
                -webkit-background-size: cover !important;
                -moz-background-size: cover !important;
                -o-background-size: cover !important;
                background-size: cover !important;
            }

            .text-center-mobile {
                text-align: left;
            }
        }

        @media only screen and (min-width : 992px) {}

        @media only screen and (min-width : 1200px) {}

        @media (max-width: 767px) {
            /*.signup-landing-page .main-hero.hero-image {
        background: url(/images/background-A-mobile-mini.jpg) no-repeat center center/100%;
        background-color: rgba(0,88,132,0.5);
        background-blend-mode: multiply;
    }*/

            .sub-line {
                line-height: 18px;
            }

            .gender-box {
                width: 90px;
                margin: 0 15px;
            }

            .radio.custom-radio label img {
                height: 80px;
            }

            .text-content ul,
            .text-content ol {
                max-width: 90%;
            }

            .text-content li {
                font-size: 14px;
                line-height: 17px;
                margin-bottom: 8px;
            }

            .spacing-sm {
                padding-top: 20px;
                padding-bottom: 20px;
            }

            .text-center mx-auto {
                margin-bottom: 20px !important;
            }

            .radio.custom-radio label {
                padding-top: 5px;
                padding-bottom: 5px;
            }

            .disclaimer {
                font-size: 14px;
                line-height: 17px;
            }

            .bigger-text {
                font-size: 16px;
                line-height: 22px;
                color: #666;
            }

            .d-flex {
                font-size: 16px;
                margin-top: 5px;
            }

            .rank {
                width: 32px;
                line-height: 32px;
            }

            .title {
                margin-bottom: 20px;
            }

            .text-center b {
                font-weight: 600;
            }
        }

        @media (min-width: 768px) {
            .signup-landing-page .main-hero.hero-image {
                background: url(/assets/img/background-A-desktop-mini.jpg) no-repeat center center/100%;
                background-color: rgba(0, 88, 132, 0.5);
                background-blend-mode: multiply;
            }
        }

        .tc-checkbox input {
            width: 15px;
            height: 15px;
        }


        .yesnobox {
            border: 1px solid #ccc;
            border-radius: 50px;
            display: flex;
            justify-content: center;
            flex-direction: row;
        }

        .yesnobox .question {
            box-sizing: border-box;
            padding: 5px 15px;
            font-size: 12px;
            width: calc(100% - 84px);
            display: inline-block;
        }

        .hide_radio {
            position: fixed;
            top: -100px;
            left: -100px;
        }

        .yesnobox .answer {
            width: 42px;
            display: flex;
            justify-content: center;
            flex-direction: column;
            padding: 0;
            text-align: center;
            font-size: 15px;
        }

        .yes {
            border-right: 1px solid #ccc;
            border-left: 1px solid #ccc;
            border-top-left-radius: 50px;
            border-bottom-left-radius: 50px;
        }

        .no {
            border-top-right-radius: 50px;
            border-bottom-right-radius: 50px;
        }

        .hide_radio:checked+.yes {
            background-color: #00a200;
            color: #fff;
        }

        .hide_radio:checked+.no {
            background-color: #e20000;
            color: #fff;
        }

        .unsubnotice {
            color: #888;
            font-style: italic;
            text-align: center;
        }
        .nav li .avatar-img img {
    border-radius: 30px;
    width: 30px;
    height: 30px;
}