@media screen and (max-width: 640px) {
    .row.plan {
        position: relative;
        z-index: 1;
    }

    /*
    .row.plan::before {
        content:"\e079";
        color:#FFF;
        position:absolute;
        left:0;
        width:107%;
        opacity:.05;
        z-index:-1;
        text-align:center;
        top: 1px;
        display: inline-block;
        font-family: 'Glyphicons Halflings';
        font-style: normal;
        font-weight: 400;
        line-height: 80px;

        font-size:60px;
        -webkit-font-smoothing: antialiased;
        transform:rotate(270deg);
    }
    */
    .plan .col-xs-6:nth-child(2):after {
        content: "" !important;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .mobile-only {
        display: block;
        margin-top: 20px;
    }

    .membership-wrapper {
        display: none;
    }

    .row.pink {
        background-color: #e10c5c;
        color: #fff;
    }

    .row.plan {
        background-color: #333;
        /*color:#fff;*/
        border-bottom: 1px solid #000;
        font-size: 18px;
        margin: 0;
        width: 100%;
    }

    .row.plan .col-xs-12.no-padding {
        display: table;
    }

    .row.plan h3,
    .row.plan p {
        color: #fff;
    }

    .row.plan .plan-details p {
        color: #333;
        margin-top: 20px;
    }

    .row.plan p {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
    }

    /*.row.plan {
        padding: 10px 15px;
        }*/
    .plan .col-xs-6 {
        float: none;
        display: table-cell;
        vertical-align: middle;
    }

    .plan .col-xs-6.title {
        width: 60%;
    }

    .plan .col-xs-6.desc {
        width: 40%;
    }

    .row.plan p.price {
        color: #fff;
        color: #333;
        font-weight: 700;
        font-size: 28px;
    }

    .row.plan p.price > span {
        font-weight: 200;
    }

    h2 {
        font-size: 30px;
        line-height: 26px;
        text-align: center;
    }

    h3 {
        margin: 20px 10px;
    }

    h4 {
        text-transform: uppercase;
        font-weight: 700;
    }

    .plan .col-xs-6:nth-child(2):after {
        content: url(/static/img/right-chevron2.png);
        margin-left: 10px;
        margin-right: 10px;
        margin-top: -16px;
        display: inline-block;
        float: right;
    }

    .plan .col-xs-6.active:after {
        transform: rotate(90deg);
    }

    .plan-details {
        display: none;
        text-align: center;
        background-color: #fff;
        color: #333;
        padding: 10px;
    }
    .dropdown[data-toggle="collapse"] {
        margin-top: 15px
    }

    .dropdown h4 {
        margin-right: 15px;
        display: inline-block;
    }

    .plan .btn {
        color: #FFF;
        width: 90%;
        background-color: #ff7800;
        padding: 10px;
        font-size: 18px;
        line-height: 17px;
        text-transform: uppercase;
        margin-top: 20px;
    }

    .plan .btn-lime {
        background-color: #32cd32;
        line-height: 34px;
    }

    .plan a {
        color: #FFF;
    }

}

@media screen and (min-width: 769px) {
    .mobile-only {
        display: none;;
    }

    .membership-wrapper {
        display: block;
    }
}

.btn-group-vertical > .btn:not(:first-child):not(.dropdown-toggle) {
    border-top: 1px solid #aaa;
    z-index: 5;
}

.membership-wrapper {
    margin: 60px 0 40px;
}

.membership-title {
    /*font-family:'Lato';*/
    font-size: 48px;
    line-height: 52px;
    top: 0;
    text-transform: uppercase;
    color: #666;
    text-align: center;
    padding-bottom: 20px;
}

.membership-card p {
    color: black;
}

.membership-card .action-area {
    margin-top: 15px;
}

.membership-card .btn {
    font-weight: 600;
    font-size: 22px;
    min-height: 58px;
    border-radius: 10px;
    line-height: 47px;
}

.membership-card-header {
    display: table;
    text-align: center;
}

.membership-card-header > div {
    display: table-cell;
    vertical-align: middle;
}

.membership-card-header .left {
    width: 44px;
}

.membership-card-header .left > img {
    width: 44px;
}

.membership-card-header .middle {
    width: calc(100% - 55px);
    padding: 0 10px;
}

.membership-card-header .right {
    width: 11px;
}

.membership-card-header .right > img {
    width: 0;
    height: 0;
    margin-left: 5px;
    border-top: 16.5px solid transparent;
    border-bottom: 16.5px solid transparent;
}

.right-arrow {
    position: absolute;
    right: 4px;
    top: calc(50% - 16px);
    width: 0;
    height: 0;
    border-top: 16.5px solid transparent;
    border-bottom: 16.5px solid transparent;
}

.get-started .right > img,
.get-started .right-arrow {
    border-left: 11px solid #f7cc45;
}

.most-popular .right > img,
.most-popular .right-arrow {
    border-left: 11px solid #93c83f;
}

.best-price .right > img,
.best-price .right-arrow {
    border-left: 11px solid #f85220;
}

.custom .right > img,
.custom .right-arrow {
    border-left: 11px solid #49aa48;
}

.membership-card-header > div > label {
    font-size: 14px;
    line-height: 16px;
    margin: 0;
}

.get-started .membership-card-header > div > label {
    color: #f5cd45;
}

.most-popular .membership-card-header > div > label {
    color: #93c83f;
}

.best-price .membership-card-header > div > label {
    color: #f87a20;
}

.custom .membership-card-header > div > label {
    color: #ff7800;
}

.membership-card-body {
    border-width: 2px;
    border-radius: 5px;
    border-style: solid;
    margin-top: 10px;
}

.membership-card-body .card-header {
    min-height: 58px;
}

.membership-card-body .card-header p {
    font-size: 15px;
    line-height: 17px;
    margin: 0;
    color: grey;
    font-weight: bold;
    padding: 12px;
}

.membership-card-body .card-header img {
    width: 0;
    height: 0;
    margin-left: 5px;
    border-left: 16.5px solid transparent;
    border-right: 16.5px solid transparent;
}

.membership-card-body .card-header h2 {
    font-size: 28px;
    text-align: center;
    line-height: 58px;
    margin: 0;
}

.membership-card-body .card-title {
    padding: 8px 0;
}

.membership-card-body .card-price {
    padding: 15px 0;
}

.membership-card-body .card-title h2 {
    text-transform: uppercase;
    color: #fff;
    font-weight: 400;
    font-size: 24px;
    text-align: center;
    margin-bottom: 0;
}

.membership-card-body .card-price h2 {
    text-transform: uppercase;
    color: #fff;
    font-weight: 600;
    font-size: 28px;
    text-align: center;
}

.membership-card-body .card-title p {
    font-size: 16px;
    color: #fff;
    text-align: center;
    margin: 0;
}

.membership-card-body .card-price p {
    font-size: 16px;
    color: #fff;
    text-align: center;
    margin: 0;
}

.membership-card-body .card-price > h2 > p {
    display: inline-block;
    text-transform: none;
}

.membership-card-body .card-body {
    padding: 20px 15px 0;
    text-align: center;
    min-height: 440px;
}

.membership-card-body .card-body > p {
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 15px;
}

.membership-card-body .card-body > p > label {
    font-size: 16px;
    font-weight: bold;
}

.membership-card-body .card-body .plan-body > a {
    font-size: 16px;
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    cursor: pointer;
}

.membership-card-body .card-body .plan-body > a > i {
    margin-right: 10px;
}

.get-started.btn,
.get-started.membership-card .btn {
    background-color: #ffc427;
}

.get-started .membership-card-body .card-header img {
    border-top: 11px solid #f7cc45;
}

.get-started.btn:hover,
.get-started.btn:active,
.get-started.membership-card .btn:hover,
.get-started.membership-card .btn:active {
    background-color: #f8d960 !important;
}

.get-started .membership-card-body {
    border-color: #f5cd45;
}

.get-started .membership-card-body:hover {
    /*outline: 8px auto #f8d960;
    outline-offset: -1px;*/
}

.get-started .membership-card-body .card-header {
}

.get-started .membership-card-body .card-header h2 {
    color: #ffc427;
}

.get-started .membership-card-body .card-title {
    background-color: #ffc427;
}

.get-started .membership-card-body .card-price {
    background-color: #f5cd45;
}

.get-started .membership-card-body .card-body {
}

.get-started .membership-card-body .card-body .plan-body > a > i {
    /*color: #f5cd45;*/
    color: #f5cd45;
}

.most-popular .membership-card-body .card-header img {
    border-top: 11px solid #93c83f;
}

.most-popular.btn,
.most-popular.membership-card .btn {
    /*background-color: #83bc57;*/
    background-color: #93c83f;
}

.most-popular.btn:hover,
.most-popular.btn:active,
.most-popular.membership-card .btn:hover,
.most-popular.membership-card .btn:active {
    background-color: #a1cc7e !important;
}

.most-popular .membership-card-body {
    /*border-color: #83bc57;*/
    border-color: #93c83f;
}

.most-popular .membership-card-body .card-header {
}

.most-popular .membership-card-body .card-header h2 {
    /*color: #83bc57;*/
    color: #93c83f;
}

.most-popular .membership-card-body .card-title {
    background-color: #93c83f;
}

.most-popular .membership-card-body .card-price {
    background-color: #a1cc7e;
}

.most-popular .membership-card-body .card-body {
}

.most-popular .membership-card-body .card-body .plan-body > a > i {
    color: #93c83f;
}

.best-price .membership-card-body .card-header img {
    border-top: 11px solid #f87a20;
}

.best-price.btn,
.best-price.membership-card .btn {
    background-color: #f85220;
}

.best-price.btn:hover,
.best-price.btn:active,
.best-price.membership-card .btn:hover,
.best-price.membership-card .btn:active {
    background-color: #f87a20 !important;
}

.best-price .membership-card-body {
    border-color: #f85220;
}

.best-price .membership-card-body .card-header {
}

.best-price .membership-card-body .card-header h2 {
    color: #f85220;
}

.best-price .membership-card-body .card-title {
    background-color: #f85220;
}

.best-price .membership-card-body .card-price {
    background-color: #f87a20;
}

.best-price .membership-card-body .card-body {
}

.best-price .membership-card-body .card-body > p > label {
}

.best-price .membership-card-body .card-body .plan-body > a > i {
    color: #f87a20;
}

.custom .membership-card-body .card-header img {
    border-top: 11px solid #ff7800;
}

.custom.btn,
.custom.membership-card .btn {
    background-color: #49aa48;
}

.custom.btn:hover,
.custom.btn:active,
.custom.membership-card .btn:hover,
.custom.membership-card .btn:active {
    background-color: #fd993f !important;
}

.custom .membership-card-body {
    border-color: #49aa48;
}

.custom .membership-card-body .card-header {
}

.custom .membership-card-body .card-header h2 {
    color: #49aa48;
}

.custom .membership-card-body .card-title {
    background-color: #49aa48;
}

.custom .membership-card-body .card-price {
    background-color: #93c83f;
}

.custom .membership-card-body .card-body {
}

.custom .membership-card-body .card-body .plan-body > a > i {
    color: #ff7800;
}

.card-body .plan-body.active i {
    transform: rotate(90deg);
}

.card-body .plan-body .plan-detail {
    display: none;
}

i.fa.active {
    transform: rotate(90deg);
}

.main-page {
    overflow: hidden;
    position: relative;
}

.work-with-us-button {
    text-align: center;
    vertical-align: middle;
    font-weight: 600;
    font-size: 16px;
    color: #fff;
    box-shadow: none;
    border: none;
    border-radius: 10px;
    background-color: darkgreen;
}

.light-blue {
    background-color: #2DC0DF;
}

.light-blue:hover {
    background-color: #7CD8EB;
    color: #fff;
}

.purple {
    background-color: #76209F;
}

.purple:hover {
    background-color: #A974C3;
    color: #fff;
}

.red {
    background-color: #BF4126;
}

.red:hover {
    background-color: #CF715C;
    color: #fff;
}

.dark-green {
    background-color: #638D41;
}

.dark-green:hover {
    background-color: #8AAA71;
    color: #fff;
}