/*
#4A2366 - VIOLET VALOR
#d8c0ea - light purple
#2D2A3E = SPACE CADET PURPLE (almost black)
*/
.rates {
    text-align: left;
    font-weight: normal !important;
}
    .rates .flexrows {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        padding-top: 5px;
        text-align: left;
        /* IE10/11 fallbacks */
        display: -ms-flexbox;
        -ms-flex-direction: row;
        -ms-flex-wrap: nowrap;
    }
    .rates h2 {
        font-size: 1.5em;
        color: #4A2366;
        margin: 0px;
    }

    .rates h3 {
        padding-top: 20px;
    }

    .rates .header {
        padding-left: 20px;
        text-align: left;
        font-size: 1.0em;
        padding-top:10px;
    }

    .rates .details {
        padding-left: 30px;        
        font-size: 0.9em;
    }
    /*this is the what's included section */
    .rates .outer {
        border-radius: 14px;
        color: white;
        background-color: #4A2366;
        border: #4A2366 solid 1px;
        padding: 10px 0px 0px 0px;
        text-align: left;
        box-shadow: 0px 0px 5px 5px #ccc;
        margin: 10px;
    }

        .rates .outer .header {
            font-size: 1.1em;
        }

        .rates .outer .rdetails {
            padding: 20px;
            font-size: 0.9em;
        }

    .rates .inner {
        border-radius: 14px;
        background-color: white;
        color: #4A2366;
        padding: 10px;
        text-align: left;
        font-size: 0.9em;
        margin: 0px auto;
        font-weight: normal;
        box-shadow: inset 0px 0px 5px 2px #000;
    }

    .rates ul {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .rates li {
        padding-left: 0px;
        list-style-image: url('../images/Checkmark.png');
        font-size: 0.9em;
    }

    .rates .bullets {
        flex: 1 49%;
        text-align: left;
        width: 49%;
    }
    /*END the what's icluded section */

    /* registration categories and rates */
    .rates .col10 {
        width: 10%;
        flex: 1 0 10%;
        min-width: 0;
    }
    .rates .col15 {
        width: 15%;
        flex: 1 0 15%;
        min-width: 0;
    }
    .rates .col20 {
        width: 20%;
        flex: 1 0 20%; /* behaves like 100% width but shrinkable */
        min-width: 0;
    }
    .rates .col30 {
        width: 30%;
        flex: 1 0 30%;
        min-width: 0;
    }
    .rates .col40 {
        width: 40%;
        flex: 1 0 40%;
    }
    .rates .col50 {
        width: 50%;
        flex: 1 0 50%;
        min-width: 0;
    }
    .rates .col60 {
       width: 60%;
       flex: 1 0 60%; 
       min-width: 0;
    }
    .rates .col70 {
        width: 70%;
        flex: 1 0 70%;
        min-width: 0;
    }
    .rates .col80 {
        width: 80%;
        flex: 1 0 80%;
        min-width: 0;        
    }
    .rates .col85 {
        width: 85%;
        flex: 1 0 85%;
        min-width: 0;
    }
    .rates .col90 {
        width: 90%;
        flex: 1 0 90%;
        min-width: 0;
    }
    .rates .purpledetails {
        color: #4A2366;
        font-size: 0.9em;
    }
    .rates .box {
        border-collapse: collapse; /* removes spacing between rows/cells */
        border-spacing: 0; /* extra safety */
    }
    .rates .box td, .rates .box th, .rates .box tr{
        text-align: center;
        margin: 0px auto;
        padding: 0px;
    }
        .rates .box th {
            color: #4A2366;
        }
    .rates .box .purpledetails {
        color: #4A2366;
        font-size: 0.8em;
        vertical-align:top;
        padding-top:1px;
    }
    .rates .flexrows .pad {
        padding-top: 20px;
    }
    .rates .tileouter {
        border-radius: 14px;
        color: white;
        background-color: #4A2366;
        border: #4A2366 solid 1px;
        padding: 0px;
        text-align: left;
        box-shadow: 0px 0px 5px 5px #ccc;
        margin: 0px 10px;
    }
    .rates .tileouter div {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;        
    }
        .rates .tileouter .icon {
            text-align: center;
            margin: 10px auto 0px 5px;
        }
        .rates .tileouter .iheader {
            font-weight: bold !important;
            font-size: 0.8em !important;
            text-align: left !important;
            padding: 0px;
            margin: 10px 10px 0px 0px !important;            
        }
        .rates .tileouter .singleheader {
            font-weight: bold !important;
            font-size: 0.8em !important;
            text-align: left !important;
            padding: 0px;
            margin: 20px 10px 0px 0px !important;
        }
        .rates .tileouter .tileinner {
            display: block;
            border-radius: 14px;
            background-color: white;
            color: #4A2366;
            padding: 10px;
            text-align: left;
            font-size: 0.7em;
            margin: 10px auto 0px auto;
            font-weight: normal;
            height: 320px;
            box-shadow: inset 0px 0px 5px 2px #000;
        }
            .rates .tileouter .tileinner .firstP {
                height: 40px;
                color: #2D2A3E;
            }
            .rates .tileouter .tileinner .firstP60 {
                height: 60px;
                color: #2D2A3E;
            }
    .rates .borderbox {       
        border-spacing: 0; /* extra safety */
        border: solid 1px #d8c0ea;
        margin-top: 15px;
        border-radius: 10px !important;
    }
        .rates .borderbox td {
            padding: 10px;
        }
            .rates .borderbox td.purpleBox {
                padding: 20px;
                margin:10px;
            }
            .rates .borderbox td.purpleLeft {
                padding: 10px;
                margin: 5px;
                text-align:left;
            }
    .rates .tileouterPurple {
        border-radius: 20px;
        color: #4A2366;
        background-color: #d8c0ea;
        border: #4A2366 solid 1px;
        padding: 0px;
        text-align: left;
        box-shadow: 0px 0px 5px 5px #ccc;
        margin: 0px 10px;
    }
        .rates .tileouterPurple .tileinner {
            display: block;
            border-radius: 20px;
            padding: 10px;
            text-align: left;
            font-size: 0.9em;
            margin: 10px auto 0px auto;
            font-weight: normal;
            height: 366px;
        }
        .rates .tileouterPurple .singleheaderPurple {
            font-weight: bold !important;
            font-size: 1.0em !important;
            text-align: center !important;
            padding: 0px;
            margin: 15px 10px 10px 0px !important;
        }
        .rates .tileouterPurple .details {
            font-size: 0.9em !important;
            text-align: left !important;
            padding: 10px;
            margin: 0px;
        }

@media screen and (max-width: 980px) {
    /* mobile styles for the boxes to stack vertically */
    .rates .flexrows {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .rates .col30 {
        flex: 0 0 50%; /* first two items share the row */
    }

    .rates .col40 {
        flex: 0 0 100%; /* third item drops to its own row */
    }
}
/* END registration categories and rates */
@media screen and (max-width: 640px) {
    /* mobile styles for the boxes to stack vertically */
    .rates .flexrows {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        -ms-flex-direction: column;
        -ms-flex-wrap: nowrap;
    }
    .rates .flexrows .pad {
     margin-top:10px;
    }

    .rates .purpledetails, .rates .details, .rates li {
        font-size: 0.8em !important;
    }

    .rates li {
        font-size: 0.9em !important;
    }

    .rates .box {
        text-align: center;
        margin: 0px auto;
        margin-top: 10px !important;
    }
    .rates .col20{
        width: 10%;
        flex: 1 10%; /* behaves like 100% width but shrinkable */
        min-width: 0;
        margin-top: 5px !important;
    }
    .rates .col80 {
        width: 90%;
        flex: 1 90%; /* behaves like 100% width but shrinkable */
        min-width: 0;
        margin-top: 5px !important;
    }
    .rates .col30, .rates .col40, .rates .col50, .rates .col60 {
        width: 100%;
        flex: 1 100%; /* behaves like 100% width but shrinkable */
        min-width: 0;
        margin-top: 10px !important;
    }
    .rates .tileouter {
        height: auto;
    }
        .rates .tileouter .tileinner, .rates .tileouterPurple .tileinner {
            margin: 0px auto 0px auto;
            height: auto;
        }
    .rates .tileouter .icon {
        margin: 5px auto 5px 5px;
    }

    .rates .tileouter .header {
        margin: 10px auto 0px auto;
        font-size:1.0em;
    }
        .rates .tileouter .tileinner .firstP, .rates .tileouter .tileinner .firstP60 {
            height: auto;
        }
}