/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, nav ul, nav li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after, q:before, q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* start editing from here */
a {
    text-decoration: none;
}

.txt-rt {
    text-align: right;
}
/* text align right */
.txt-lt {
    text-align: left;
}
/* text align left */
.txt-center {
    text-align: center;
}
/* text align center */
.float-rt {
    float: right;
}
/* float right */
.float-lt {
    float: left;
}
/* float left */
.clear {
    clear: both;
}
/* clear float */
.pos-relative {
    position: relative;
}
/* Position Relative */
.pos-absolute {
    position: absolute;
}
/* Position Absolute */
.vertical-base {
    vertical-align: baseline;
}
/* vertical align baseline */
.vertical-top {
    vertical-align: top;
}
/* vertical align top */
nav.vertical ul li {
    display: block;
}
/* vertical menu */
nav.horizontal ul li {
    display: inline-block;
}
/* horizontal menu */
img {
    max-width: 100%;
}
/*end reset*/

body {
    padding: 0;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    /*background: url(../images/1.png) repeat;*/
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

p {
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
}

label {
    margin: 0;
}
/*-- main --*/
.main {
    padding: 10px 0;
}

    .main h1 {
        font-size: 35px;
        text-align: center;
        text-transform: uppercase;
        color: #B3E03F;
        margin-bottom: 25px;
        font-family: 'Fugaz One', cursive;
    }

.content {
    width: 40%;
    margin: 0 auto;
}

p.footer {
    color: #3AD5A0;
    text-align: center;
    font-size: 14px;
    margin-top: 35px;
    font-weight: 600;
}

    p.footer a {
        color: #3AD5A0;
    }

        p.footer a:hover {
            color: #B3E03F;
        }
/******** SAP ************/
.sap_tabs {
    clear: both;
    padding: 0em 0 0em;
}

.pay-tabs {
    margin: 0 0 0 0;
    /*padding: 1em 1em 1.5em 1em;*/
    padding-left: 1em;
    padding-top: 1em;
    background: #fff;
    border: 1px solid #e7ebee;
}

    .pay-tabs h2 {
        font-size: 26px;
        text-align: center;
        margin-bottom: 10px;
        color: #3AD5A0;
        font-weight: 500;
        font-family: 'Alegreya Sans', sans-serif;
    }

.resp-tabs-list {
    list-style: none;
    margin: 0 0 0em 0;
    padding: 0;
}

.resp-tab-item {
    font-size: 14px;
    text-decoration: none;
    color: #a9acb1;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    list-style: none;
    outline: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    text-transform: capitalize;
    display: inline-block;
    margin: 0 7%;
    float: left;
    width: 17%;
}

.resp-tab-active {
    color: #B3E03F;
}

.resp-tabs-container {
    padding: 0px;
    clear: left;
    padding: 2em 2.5em;
    background: #fff;
    border: 1px solid #e7ebee;
}

h2.resp-accordion {
    cursor: pointer;
    padding: 5px;
    display: none;
}

.resp-tab-content {
    display: none;
}

.resp-content-active, .resp-accordion-active {
    display: block;
}

li.resp-tab-item span .pic1 {
    background: url(../images/pic2.png) no-repeat 38px 15px #fafafa !important;
}

li.resp-tab-item span .pic2 {
    background: url(../images/pic3.png) no-repeat 38px 15px #fafafa !important;
}

li.resp-tab-item span .pic3 {
    background: url(../images/pic1.png) no-repeat 14px 15px #fafafa !important;
}

li.resp-tab-item span .pic4 {
    background: url(../images/pic4.png) no-repeat 38px 15px #fafafa !important;
}

li.resp-tab-item span .pic1, li.resp-tab-item span .pic2, li.resp-tab-item span .pic3, li.resp-tab-item span .pic4 {
    width: 100%;
    height: 60px;
    display: block;
    border: 1px solid #e7ebee;
    padding: 15px 0px;
    margin-bottom: 15px;
    cursor: pointer;
}

li.resp-tab-item.resp-tab-active span label {
    border: 1px solid #B3E03F;
}

.payment-info h3 {
    font-size: 26px;
    text-align: center;
    margin-bottom: 15px;
    color: #3AD5A0;
    font-weight: 500;
    font-family: 'Alegreya Sans', sans-serif;
}

.tab-for input[type="text"] {
    width: 96%;
    padding: 8px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #e7ebee;
    outline: none;
    color: #606060;
    border-radius: 5px;
    margin-bottom: 20px;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

.tab-for h5, .tab-form-left h5, .tab-form-right h5 {
    color: #435964;
    font-size: 13px;
    text-transform: uppercase;
    margin: 0 0 8px 0;
    font-weight: 600;
}

.tab-for input[type="text"]:hover {
    border: 1px solid #B3E03F;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}
/*input.pay-logo{
    width: 89.5% !important;
    padding: 8px 45px 8px 8px !important;
    background: url(../images/visa.png) no-repeat 98%;
}*/
.tab-form-left {
    float: left;
    width: 48%;
}

.user-form ul li {
    list-style-type: none;
    display: inline-block;
    width: 23%;
    margin-right: 9%;
}

.text_box {
    display: inline;
    width: 60px;
    padding: 3px 5px;
    outline: none;
    margin-left: 1%;
    font-size: 20px;
    color: #444;
    width: 100%;
    color: #606060;
    font-size: 15px;
    padding: 8px 0 8px 10px;
    border: none;
    outline: none;
    background: #fff;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

input.text_box {
    background: #fcfcfc;
    border: 1px solid #ebeced;
}

.tab-form-right {
    float: right;
    width: 48%;
}

    .tab-form-right input[type="text"] {
        width: 92%;
        padding: 8px;
        font-size: 13px;
        font-weight: 600;
        border: 1px solid #e7ebee;
        outline: none;
        color: #606060;
        border-radius: 5px;
        margin-bottom: 30px;
        transition: 0.5s all;
        -webkit-transition: 0.5s all;
        -moz-transition: 0.5s all;
        -o-transition: 0.5s all;
        -ms-transition: 0.5s all;
    }

        .tab-form-right input[type="text"]:hover {
            border: 1px solid #B3E03F;
            transition: 0.5s all;
            -webkit-transition: 0.5s all;
            -moz-transition: 0.5s all;
            -o-transition: 0.5s all;
            -ms-transition: 0.5s all;
        }

.payment-info form input[type="submit"] {
    background: #B3E03F;
    color: #FFFFFF;
    text-align: center;
    padding: 10px 0;
    border: none;
    font-size: 16px;
    outline: none;
    width: 22%;
    cursor: pointer;
    font-weight: 600;
    margin-bottom: 30px;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

    .payment-info form input[type="submit"]:hover {
        background: #3AD5A0;
        transition: 0.5s all;
        -webkit-transition: 0.5s all;
        -moz-transition: 0.5s all;
        -o-transition: 0.5s all;
        -ms-transition: 0.5s all;
    }

.single-bottom ul li {
    list-style: none;
    padding: 0px;
}

    .single-bottom ul li input[type="checkbox"] {
        display: none;
    }

        .single-bottom ul li input[type="checkbox"] + label {
            position: relative;
            padding-left: 31px;
            border: none;
            outline: none;
            font-size: 13px;
            color: #2d3e50;
            font-weight: 600;
            line-height: 1.8em;
        }

            .single-bottom ul li input[type="checkbox"] + label span:first-child {
                width: 14px;
                height: 14px;
                display: inline-block;
                border: 2px solid #B3E03F;
                position: absolute;
                left: 0;
                top: 1px;
            }

        .single-bottom ul li input[type="checkbox"]:checked + label span:first-child:before {
            content: "";
            background: url(../images/11.png)no-repeat;
            position: absolute;
            left: -1px;
            top: 0px;
            font-size: 10px;
            width: 16px;
            height: 16px;
        }

.radio {
    position: relative;
    display: inline-block;
    margin-left: 15px;
}

    .radio:first-child {
        margin-left: 0;
        margin: 0;
    }

.radio {
    padding-left: 22px;
    line-height: 28px;
    color: #404040;
    cursor: pointer;
}

    .radio input[type="radio"] {
        position: absolute;
        left: -9999px;
    }

.radio-btns label {
    font-size: 14px;
    color: #000;
    padding: 0px 0 0 10px;
    font-weight: 600;
}

.radio i {
    position: absolute;
    top: 5px;
    left: 0;
    display: block;
    width: 12px;
    height: 12px;
    outline: none;
    border: 3px solid #B5E045;
    background: #fff;
    cursor: pointer;
}

.radio i {
    border-radius: 50%;
}

.radio input + i:after {
    position: absolute;
    opacity: 0;
    transition: opacity 0.1s;
    -o-transition: opacity 0.1s;
    -ms-transition: opacity 0.1s;
    -moz-transition: opacity 0.1s;
    -webkit-transition: opacity 0.1s;
}

.radio input + i:after {
    content: '';
    top: 6px;
    left: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
}

.radio input:checked + i:after {
    opacity: 1;
}

label.checkbox {
    width: 28%;
    floaT: left;
}
/*** normal state ***/
.radio i {
    transition: border-color 0.3s;
    -o-transition: border-color 0.3s;
    -ms-transition: border-color 0.3s;
    -moz-transition: border-color 0.3s;
    -webkit-transition: border-color 0.3s;
}
/*** checked state ***/
.radio input + i:after {
    content: '';
    background: url("../images/tick-mark1.png") no-repeat center;
    top: 1px;
    left: 1px;
    width: 9px;
    height: 9px;
    text-align: center;
}

.radio input:checked + i {
    border: 3px solid #B5E045;
    background: #fff;
}

.swit {
    float: left;
    width: 50%;
}

.check_box {
    margin-bottom: 5px;
}

.payment-info a {
    padding: 8px 10px;
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    background: #B5E045;
}

    .payment-info a:hover {
        background: #3AD5A0;
    }

.radio-btns {
    margin-bottom: 30px;
}

.login-tab {
    margin-top: 15px;
}

.user-login h2 {
    margin: 0 0 18px 0;
    color: #424448;
    font-size: 24px;
    text-align: center;
    font-weight: bold;
}

.graph-header h3 {
    margin: 0 0 18px 0;
    color: #424448;
    font-size: 24px;
    text-align: center;
    font-weight: bold;
}

.graph-grid {
    background: #fff;
    padding: 42px 20px;
    margin: 15px 0;
}

.con-btm-l {
    float: left;
    width: 46%;
}

.con-btm-r {
    float: left;
    width: 51.5%;
    margin-left: 2.5%;
}

.con-btm-right {
    padding-right: 0;
}

.user-login form input[type="text"], .user-login form input[type="password"] {
    margin: 0 0 24px 0;
    background: #fcfcfc;
    width: 94%;
    padding: 12px 15px;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid #ebeced;
    outline: none;
    color: #D7D7D7;
}

.user-login form {
    margin-top: 22px;
}

.user-left i {
    font-style: normal;
    vertical-align: text-bottom;
    font-size: 14px;
    font-weight: bold;
    margin-left: 5px;
}

.user-left {
    width: 61%;
    float: left;
}

.user-right {
    width: 21%;
    float: right;
}

    .user-right input[type="submit"] {
        background: #ed5564;
        font-weight: bold;
        font-size: 16px;
        color: #ffffff;
        padding: 10px 25px;
        border: none;
        width: 100% !important;
        transition: 0.5s all;
        -webkit-transition: 0.5s all;
        -moz-transition: 0.5s all;
        -o-transition: 0.5s all;
        -ms-transition: 0.5s all;
    }

        .user-right input[type="submit"]:hover {
            background: #28b08a;
            transition: 0.5s all;
            -webkit-transition: 0.5s all;
            -moz-transition: 0.5s all;
            -o-transition: 0.5s all;
            -ms-transition: 0.5s all;
        }

.payment-info h4 {
    font-size: 14px;
    text-align: center;
    color: #000;
}
/*-- responsive media queries --*/
@media (max-width: 1440px) {
    li.resp-tab-item span .pic3 {
        background: url(../images/pic1.png) no-repeat 8px 15px #fafafa !important;
    }

    li.resp-tab-item span .pic1 {
        background: url(../images/pic2.png) no-repeat 29px 15px #fafafa !important;
    }

    li.resp-tab-item span .pic4 {
        background: url(../images/pic4.png) no-repeat 31px 15px #fafafa !important;
    }

    li.resp-tab-item span .pic2 {
        background: url(../images/pic3.png) no-repeat 29px 15px #fafafa !important;
    }
}

@media (max-width: 1366px) {
    .content {
       /* width: 41.5%;*/
        width: 50%;
        margin: 0 auto;
    }

    input.pay-logo {
        width: 88.5% !important;
    }
}

@media (max-width: 1280px) {
    .resp-tab-item {
        margin: 0 3%;
        width: 19%;
    }

    input.pay-logo {
        width: 87% !important;
    }

    .single-bottom ul li input[type="checkbox"] + label {
        padding-left: 24px;
    }
}

@media (max-width: 1080px) {
    .content {
        /*width: 48.5%;*/
        width: 100%;
        margin: 0 auto;
    }

    .tab-form-right input[type="text"] {
        width: 91%;
    }

    .user-form ul li {
        width: 26%;
    }
}

@media (max-width: 1024px) {
    .content {
        width: 49.5%;
        margin: 0 auto;
    }

    .swit {
        float: left;
        width: 44%;
        margin-right: 6%;
    }
}

@media (max-width: 991px) {
    .pay-tabs h2, .payment-info h3 {
        font-size: 22px;
    }

    .resp-tab-item {
        margin: 0 2%;
        width: 21%;
    }

    .user-form ul li {
        width: 29%;
    }

    .swit {
        margin-right: 12%;
    }

        .swit:nth-child(2) {
            margin: 0;
        }
}

@media (max-width: 800px) {
    .content {
        width: 60%;
        margin: 0 auto;
    }

    input.pay-logo {
        width: 85% !important;
    }

    .tab-for input[type="text"] {
        width: 95%;
    }

    .tab-form-right input[type="text"] {
        width: 90%;
    }

    .radio-btns label {
        font-size: 13px;
        color: #000;
        padding: 0px 0 0 2px;
        font-weight: 600;
    }

    .radio i {
        top: 6px;
    }

    .user-login form input[type="text"], .user-login form input[type="password"] {
        width: 92%;
    }

    .resp-tab-item {
        font-size: 13px;
    }

    .payment-info form input[type="submit"] {
        font-size: 14px;
    }

    .payment-info h4 {
        font-size: 13px;
    }

    .main h1 {
        font-size: 30px;
    }
}

@media (max-width: 768px) {
    .content {
        width: 61%;
    }
}

@media (max-width: 736px) {
    .content {
        width: 64%;
    }
}

@media (max-width: 667px) {
    .content {
        width: 71.5%;
    }
}

@media (max-width: 640px) {
    .content {
        width: 74.5%;
    }

    .tab-form-right input[type="text"] {
        width: 89%;
    }

    p.footer {
        font-size: 13px;
    }
}

@media (max-width: 600px) {
    .content {
        width: 79.5%;
    }
}

@media (max-width: 568px) {
    .content {
        width: 83.5%;
    }
}

@media (max-width: 480px) {
    .content {
        width: 92%;
    }

    li.resp-tab-item span .pic3 {
        background: url(../images/pic1.png) no-repeat 5px 15px #fafafa !important;
    }

    li.resp-tab-item span .pic1 {
        background: url(../images/pic2.png) no-repeat 26px 15px #fafafa !important;
    }

    li.resp-tab-item span .pic4 {
        background: url(../images/pic4.png) no-repeat 27px 15px #fafafa !important;
    }

    li.resp-tab-item span .pic2 {
        background: url(../images/pic3.png) no-repeat 25px 15px #fafafa !important;
    }

    .user-form ul li {
        width: 34%;
    }

    .tab-form-right {
        float: right;
        width: 45%;
    }

    p.footer {
        font-size: 13px;
        line-height: 1.8em;
        width: 92%;
        margin: 30px auto 0 auto;
    }

    .resp-tabs-container {
        padding: 1em 1em;
    }

    .tab-form-right input[type="text"] {
        width: 88%;
    }

    .main h1 {
        font-size: 25px;
    }
}

@media (max-width: 414px) {
    .resp-tab-item {
        margin: 0 6%;
        width: 38%;
    }

    li.resp-tab-item span .pic1 {
        background: url(../images/pic2.png) no-repeat 46px 15px #fafafa !important;
    }

    li.resp-tab-item span .pic3 {
        background: url(../images/pic1.png) no-repeat 27px 15px #fafafa !important;
    }

    li.resp-tab-item span .pic4 {
        background: url(../images/pic4.png) no-repeat 50px 15px #fafafa !important;
    }

    li.resp-tab-item span .pic2 {
        background: url(../images/pic3.png) no-repeat 46px 15px #fafafa !important;
    }

    li.resp-tab-item:nth-child(3), li.resp-tab-item:nth-child(4) {
        margin-top: 25px;
    }

    .tab-for input[type="text"] {
        width: 94%;
    }

    input.pay-logo {
        width: 83% !important;
    }

    .tab-form-right input[type="text"] {
        width: 86%;
    }

    .swit {
        float: left;
        width: 48%;
        margin-right: 4%;
    }

        .swit:nth-child(2) {
            margin: 0;
        }

    .user-login form input[type="text"], .user-login form input[type="password"] {
        width: 90%;
    }
}

@media (max-width: 384px) {
    input.pay-logo {
        width: 81% !important;
    }

    .user-form ul li {
        width: 37%;
    }

    li.resp-tab-item span .pic1 {
        background: url(../images/pic2.png) no-repeat 42px 15px #fafafa !important;
    }

    li.resp-tab-item span .pic3 {
        background: url(../images/pic1.png) no-repeat 20px 15px #fafafa !important;
    }

    li.resp-tab-item span .pic4 {
        background: url(../images/pic4.png) no-repeat 44px 15px #fafafa !important;
    }

    li.resp-tab-item span .pic2 {
        background: url(../images/pic3.png) no-repeat 42px 15px #fafafa !important;
    }

    .swit {
        float: left;
        width: 100%;
        margin-right: 0;
    }

    .user-login form input[type="text"], .user-login form input[type="password"] {
        width: 89%;
    }
}

@media (max-width: 375px) {
}

@media (max-width: 320px) {
    .main h1 {
        font-size: 20px;
    }

    .main {
        padding: 45px 0;
    }

    .pay-tabs h2, .payment-info h3 {
        font-size: 19px;
    }

    li.resp-tab-item span .pic1, li.resp-tab-item span .pic2, li.resp-tab-item span .pic3, li.resp-tab-item span .pic4 {
        padding: 12px 0px;
    }

    li.resp-tab-item span .pic1 {
        background: url(../images/pic2.png) no-repeat 32px 13px #fafafa !important;
    }

    li.resp-tab-item span .pic3 {
        background: url(../images/pic1.png) no-repeat 10px 11px #fafafa !important;
    }

    li.resp-tab-item span .pic4 {
        background: url(../images/pic4.png) no-repeat 34px 12px #fafafa !important;
    }

    li.resp-tab-item span .pic2 {
        background: url(../images/pic3.png) no-repeat 30px 12px #fafafa !important;
    }

    .pay-tabs {
        margin: 0 0 1.5em 0;
    }

    .tab-for input[type="text"] {
        width: 92%;
    }

    input.pay-logo {
        width: 76.5% !important;
    }

    .payment-info form input[type="submit"] {
        width: 32%;
        margin-bottom: 19px;
    }

    .tab-form-left {
        float: left;
        width: 100%;
    }

    .user-form ul li {
        width: 42.5%;
        margin-right: 6.5%;
    }

    .tab-form-right {
        float: right;
        width: 100%;
        margin-top: 20px;
    }

        .tab-form-right input[type="text"] {
            width: 92%;
        }

    .user-right {
        width: 30%;
    }

    .payment-info form input[type="submit"] {
        padding: 7px 0;
    }

    p.footer {
        margin: 20px auto 0 auto;
    }
}

.ddl {
    border: 2px solid #7d6754;
    border-radius: 5px;
    padding: 3px;
    -webkit-appearance: none;
    background-position: 88px;
    background-repeat: no-repeat;
    text-indent: 0.01px; /*In Firefox*/
    text-overflow: ''; /*In Firefox*/
}

.pay-tabsmainlogo {
    margin: 0 0 0 0;
    /*padding: 1em 1em 1.5em 1em;
    padding-left: 1em;
    padding-top: 1em;*/
    background: #fff;
    border: 1px solid #e7ebee;
}

div#spinner {
    display: none;
    width: 100px;
    height: 100px;
    position: fixed;
    top: 50%;
    left: 50%;
    background: url(../images/DualRing.gif) no-repeat center #fff;
    text-align: center;
    padding: 10px;
    font: normal 16px Tahoma, Geneva, sans-serif;
    border: 1px solid #666;
    margin-left: -50px;
    margin-top: -50px;
    z-index: 2;
    /*overflow: auto;*/
}