﻿li.active > a.hidden-xs {
    display: block !important;
}

li.active > a.visible-xs {
    display: none !important;
}

.nav-pills.nav-wizard > li {
    position: relative;
    overflow: visible;
    border-right: 10px solid #fff;
    border-left: 10px solid #fff;
}

    .nav-pills.nav-wizard > li:first-child {
        border-left: 0;
    }

        .nav-pills.nav-wizard > li:first-child a {
            border-radius: 5px 0 0 5px;
        }

    .nav-pills.nav-wizard > li:last-child {
        border-right: 0;
    }

        .nav-pills.nav-wizard > li:last-child a {
            border-radius: 0 5px 5px 0;
        }

    .nav-pills.nav-wizard > li a {
        border-radius: 0;
        background-color: #eee;
        padding: 10px;
    }

    .nav-pills.nav-wizard > li .nav-arrow {
        position: absolute;
        top: 0px;
        right: -20px;
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 20px 0 20px 20px;
        border-color: transparent transparent transparent #eee;
        z-index: 150;
    }

    .nav-pills.nav-wizard > li .nav-wedge {
        position: absolute;
        top: 0px;
        left: -20px;
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 20px 0 20px 20px;
        border-color: #eee #eee #eee transparent;
        z-index: 150;
    }

    .nav-pills.nav-wizard > li:hover .nav-arrow {
        border-color: transparent transparent transparent #aaa;
    }

    .nav-pills.nav-wizard > li:hover .nav-wedge {
        border-color: #aaa #aaa #aaa transparent;
    }

    .nav-pills.nav-wizard > li:hover a {
        background-color: #aaa;
        color: #fff;
    }

    .nav-pills.nav-wizard > li.active .nav-arrow {
        border-color: transparent transparent transparent #428bca;
    }

    .nav-pills.nav-wizard > li.active .nav-wedge {
        border-color: #428bca #428bca #428bca transparent;
    }

    .nav-pills.nav-wizard > li.active a {
        background-color: #428bca;
    }
/* CSS for Credit Card Payment form */
.credit-card-box .panel-title {
    display: inline;
    font-weight: bold;
}

.credit-card-box .form-control.error {
    border-color: red;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(255,0,0,0.6);
}

.credit-card-box label.error {
    font-weight: bold;
    color: red;
    padding: 2px 8px;
    margin-top: 2px;
}

.credit-card-box .payment-errors {
    font-weight: bold;
    color: red;
    padding: 2px 8px;
    margin-top: 2px;
}

.credit-card-box label {
    display: block;
}

.credit-card-box .display-tr {
    display: table-row;
}

.credit-card-box .display-td {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
}
/* Just looks nicer */
.credit-card-box .panel-heading img {
    min-width: 180px;
}

.left {
    padding-left: 24px;
}

html {
    position: relative;
    min-height: 100%;
}

/*body {
    margin-bottom: 60px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    padding: 25px 0 0;
}*/

.check label {
    width: 20%;
    text-align: center;
    float: left;
}

.quest-row, .quest-title {
    margin-bottom: 20px;
}
.mob-width{
    max-width:300px;
}
.btn-grp {
    text-align: center;
}
/*#Facebookpage .quest-row .check{
        margin-top: 20px;
}*/
    .btn-grp .btn {
        width: 120px;
        font-family: inherit;
        margin-top: 25px;
    }

@media screen and (max-width: 767px) {
    .quest-title .check {
        display: none !important;
    }

  .check label{
    width: 15%;
        margin-top: 15px;
    }
    .quest-row .check label:before {
    position: absolute;
    margin-top: -18px;
    margin-left: 4px;
}

    .quest-row .check:nth-child(1) label:before {
        content: "5";
    }

    .quest-row .check:nth-child(2) label:before {
        content: "4";
    }

    .quest-row .check:nth-child(3) label:before {
        content: "3";
    }

    .quest-row .check:nth-child(4) label:before {
        content: "2";
    }

    .quest-row .check:nth-child(5) label:before {
        content: "1";
    }
}

@media screen and (max-width: 360px) {
    .btn-grp .btn {
            width: 90px;
    }
}