﻿/* Use a wide full screen for small screens like tablets. */
/*@media (min-width: 768px) and (max-width:992px) {
    .container {
		width: initial;
        padding-left: 2em;
        padding-right: 2em;        
	}
}*/

/* --- Plans ---------------------------- */

.my_planHeader {
    text-align: center;
    color: white;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    min-height: 165px;
}

.my_planTitle {
    font-size: 1.8em;
    font-weight: bold;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1em;
}

.my_planPrice {
    font-size: 1.4em;
    /*font-weight: bold;*/
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

.my_planDuration {
    margin-top: -0.6em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.my_planIntersection {
    min-height: 165px;
    background-color: #f3f3f3;
    color: #aba6a6;
    position: relative;
    font-size: 30px;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: thick solid #e0e2e5;
}

    .my_planIntersection > svg {
        position: absolute;
        left: 0;
        top: 0;
        stroke: #e0e2e5;
        stroke-width: 2;
    }

    .my_planIntersection > div {
        position: absolute;
    }

        .my_planIntersection > div:first-child {
            left: 15%;
            bottom: 20%;
        }

        .my_planIntersection > div:last-child {
            right: 15%;
            top: 20%;
        }

/*@media (max-width: 768px) {
    .my_planTitle {
        font-size:small;
    }    
}

@media (max-width: 992px) {
    .my_planTitle {
        font-size:large;
    }    
}*/

/* --- Features ------------------------- */

.my_feature {
    line-height: 2.8em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*@media (max-width: 768px) {
    .my_feature {
        text-align: center
    }
 }*/

.my_featureRow {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    border: 0.1em solid rgb(163, 163, 163);
}

/* --- Plan 1 --------------------------- */
.my_plan1 {
    background: rgb(224,234,242);
}

.my_planHeader.my_plan1 a {
    background: rgb(72, 109, 139);
    color: white;
}

.my_planHeader.my_plan1 {
    background: rgb(105, 153, 193);
    border-bottom: thick solid rgb(72, 109, 139);
}

/* --- Plan 2 --------------------------- */
.my_plan2 {
    background: rgb(230,235,218);
}

.my_planHeader.my_plan2 a {
    background: rgb(108, 131, 62);
    color: white;
}

.my_planHeader.my_plan2 {
    background: rgb(134, 162, 77);
    border-bottom: thick solid rgb(108, 131, 62);
}

/* --- Plan 3 --------------------------- */
.my_plan3 {
    background: rgb(254,235,212);
}

.my_planHeader.my_plan3 a {
    background: rgb(199, 127, 40);
    color: white;
}

.my_planHeader.my_plan3 {
    background: rgb(253, 161, 49);
    border-bottom: thick solid rgb(199, 127, 40);
}

.my_planFeature {
    text-align: center;
    font-size: 2em;
}

    .my_planFeature i.my_check {
        color: green;
    }

.order-total-table {
    display: table;
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    color: #5e5e5e;
}

    .order-total-table > .discount > div {
        height: 24px;
        border-top: dashed 1px green;
        color: green;
    }

    .order-total-table > div {
        display: table-row;
    }

        .order-total-table > div > div {
            display: table-cell;
            height: 64px;
            width: 80%;
            background-color: #f7f7f7;
            vertical-align: middle;
            padding-left: 10px;
        }

            .order-total-table > div > div:last-child {
                width: 20%;
                background-color: #e7e7e7;
                text-align: center;
                padding-left: 0;
            }

        .order-total-table > div:last-child > div {
            height: 36px;
            background-color: #ffe993;
        }

            .order-total-table > div:last-child > div:last-child {
                background-color: #ffde64;
            }

.sub-privacy-header {
    background-color: #e7e7e7;
    font-weight: bold;
    color: #5e5e5e;
    height: 36px;
    line-height: 36px;
    border-radius: 5px;
}

.sub-privacy-body {
    padding: 20px;
    border: 1px solid #e7e7e7;
    border-radius: 5px;
}

.pro-sub-subtitle {
    margin: 0 !important;
    font-weight: bold;
}

.pro-sub-intro {
    font-weight: bold;
    font-size: 22px;
    color: red;
}

    .pro-sub-intro > span {
        font-size: 32px;
    }
