
.banner_title {
    color: #fff;
}

.banner_subtitle {
    margin: 0;
    color: #f5e9c7;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.product-picker{
    padding-top:1rem;
    padding-bottom:1rem
}
.container{
    margin-left:auto;
    margin-right:auto;
    padding-left:15px;
    padding-right:15px
}
.container::after{
    content:"";
    display:table;
    clear:both
}
@media (min-width: 30rem){
    .container{
        max-width:32rem
    }
}
@media (min-width: 48rem){
    .container{
        max-width:45rem
    }
}
@media (min-width: 66.5rem){
    .container{
        max-width:58.75rem
    }
}
@media (min-width: 86rem){
    .container{
        max-width:71.25rem
    }
}
.container-fluid{
    margin-left:auto;
    margin-right:auto;
    padding-left:15px;
    padding-right:15px
}
.container-fluid::after{
    content:"";
    display:table;
    clear:both
}
/*.row{margin-left:-15px;margin-right:-15px}*/
/*.row::after{content:"";display:table;clear:both}*/

.product__wrapper {
    /*padding-bottom: 2rem;*/
    padding-left: 1rem;
    padding-right: 1rem;
}

.left{
    float:left;
    /*width:33%;*/
    width:50%;
}

/*@media (min-width: 66.5rem)*/
    .col-lg-4 {
        float: left;
        width: 33.33333%;
    }

    .block {
        display: block !important;
    }

    .product__card {
        border-radius: .3rem;
        padding: 1.5rem 1rem;
        /*color: #636567;*/
        color: transparent;
        line-height: 1.3;
        font-size: 1.2rem;
        text-align: center;
        text-decoration: none;
        /*background: #f5f3f5;*/
        background: #E8EEF4;
        /*border: 1px solid #ebebeb;*/
        /*-webkit-box-shadow: 0 -0.25rem 4rem -0.5rem rgba(0,0,0,0.1);*/
        /*box-shadow: 0 -0.25rem 4rem -0.5rem rgba(0,0,0,0.1);*/
        -webkit-transition: color 200ms ease-in, background 200ms ease-in;
        -o-transition: color 200ms ease-in, background 200ms ease-in;
        transition: color 200ms ease-in, background 200ms ease-in;
    }
    .product__card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        overflow: hidden;
    }
    .inline-block {
        display: inline-block !important;
    }
    .product__logo{
        height:0.60em;
        width:0.60em;
        margin-bottom:0.10em
    }
    .product__logo--invertible{
        position:relative
    }
    .logo{
        height:100%;
        width:100%
    }
    .logo--primary{
        opacity:1
    }
    .logo--inverted{
        opacity:0
    }
    .product__title{
        font-family:"Muli", sans-serif
    }

    .product__title-highlight{
        color:#fcc074;
        text-transform:uppercase;
        font-size:70.5%;
        font-weight:400;
        -webkit-transition:color 500ms ease;
        -o-transition:color 500ms ease;
        transition:color 500ms ease
    }
    .version-picker .product__title:hover,.version-picker
    .product__title:active,.version-picker .product__title:focus{
        color:#636567
    }

    .product__description{min-height:3.9em}

    /*---------*/
    .product__card{
        border-radius:.3rem;
        padding:1.5rem 1rem;
        /*color:#636567;*/
        color:transparent;
        line-height:1.3;
        font-size:1.2rem;
        text-align:center;
        text-decoration:none;
        /*background:#f5f3f5;*/
        background:#E8EEF4;
        /*border:1px solid #ebebeb;*/
        /*-webkit-box-shadow:0 -0.25rem 4rem -0.5rem rgba(0,0,0,0.1);*/
        /*box-shadow:0 -0.25rem 4rem -0.5rem rgba(0,0,0,0.1);*/
        -webkit-transition:color      200ms ease-in, background 200ms ease-in;
        -o-transition:color      200ms ease-in, background 200ms ease-in;
        transition:color      200ms ease-in, background 200ms ease-in
    }
    .product__card .product__title{
        font-size:3.75rem;
        font-weight:700;
        line-height:1;
        margin-bottom:1.25rem;
        /*color:#636567;*/
        color:transparent;
        text-transform:lowercase;
        -webkit-transition:color 200ms ease-in;
        -o-transition:color 200ms ease-in;
        transition:color 200ms ease-in
    }
    .product__card .product__title .product__logo{
        vertical-align:middle;
        height:0.60em;
        width:0.60em;
        margin-bottom:0.10em
    }
    .product__card .product__title .product__logo .logo{
        height:100%;
        width:100%
    }
    .product__card .product__title .product__logo--invertible{
        position:relative
    }
    .product__card .product__title .product__logo--invertible .logo{
        position:absolute;
        left:0;
        -webkit-transition:opacity 200ms ease-in;
        -o-transition:opacity 200ms ease-in;
        transition:opacity 200ms ease-in
    }
    .product__card .product__title .product__logo--invertible .logo--primary{
        opacity:1
    }
    .product__card .product__title .product__logo--invertible .logo--inverted{
        opacity:0
    }
    .product__card .product__title .product__title-highlight{
        color:#f99d53;
        text-transform:uppercase;
        font-size:70.5%;
        font-weight:400;
        -webkit-transition:color 200ms ease-in;
        -o-transition:color 200ms ease-in;
        transition:color 200ms ease-in
    }
    @media (min-width: 66.5rem){
        .product__card .product__description{
            min-height:3.9em
        }
    }
    .product__card:hover,.product__card:active,.product__card:focus{
        text-decoration:none;
        color:#f0f2f5;
        background:#6c8997
    }
    .product__card:hover .product__title,.product__card:active
    .product__title,.product__card:focus .product__title{
        color:#f0f2f5
    }
    .product__card:hover .product__title .product__logo--invertible
    .logo--primary,.product__card:active .product__title
    .product__logo--invertible .logo--primary, .product__card:focus
    .product__title .product__logo--invertible .logo--primary {
        opacity:0
    }
    .product__card:hover .product__title .product__logo--invertible
    .logo--inverted,.product__card:active .product__title
    .product__logo--invertible .logo--inverted,.product__card:focus
    .product__title .product__logo--invertible .logo--inverted{
        opacity:1
    }

table {
    background: #f5f5f5;
    border-collapse: separate;
    box-shadow: inset 0 1px 0 #fff;
    font-size: 16px;
    line-height: 24px;
    margin: 30px auto;
    text-align: left;
    max-width: 900px;
    width: auto;
}



th {
    /*background: url(http://jackrugile.com/images/misc/noise-diagonal.png), linear-gradient(#777, #444);*/
    /*background-color: #23355c;*/
    background-image: url('images/light-bl.svg'), url('images/light-br.svg'), url('images/overlay.png'), url('../images/cp.jpg');
    border-left: 1px solid #555;
    border-right: 1px solid #777;
    border-top: 1px solid #555;
    border-bottom: 1px solid #333;
    box-shadow: inset 0 1px 0 #999;
    color: #fff;
    font-weight: bold;
    padding: 10px 15px;
    position: relative;
    text-shadow: 0 1px 0 #000;
    text-align: center;
}

th:first-child {
    border-left: 1px solid #777;
    box-shadow: inset 1px 1px 0 #999;
}

th:last-child {
    box-shadow: inset -1px 1px 0 #999;
}

td {
    border-right: 1px solid #fff;
    border-left: 1px solid #e8e8e8;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #e8e8e8;
    padding: 10px 15px;
    position: relative;
    transition: all 300ms;
}

td:first-child {
    box-shadow: inset 1px 0 0 #fff;
    white-space: nowrap;
    text-align: center;
}

td:last-child {
    border-right: 1px solid #e8e8e8;
    box-shadow: inset -1px 0 0 #fff;
}

tr {
    background: url(http://jackrugile.com/images/misc/noise-diagonal.png);
}

tr:nth-child(odd) td {
    background: #f1f1f1 url(http://jackrugile.com/images/misc/noise-diagonal.png);
}

tr:last-of-type td {
    box-shadow: inset 0 -1px 0 #fff;
}

tr:last-of-type td:first-child {
    box-shadow: inset 1px -1px 0 #fff;
}

tr:last-of-type td:last-child {
    box-shadow: inset -1px -1px 0 #fff;
}

/*
tbody:hover td {
    color: transparent;
    text-shadow: 0 0 3px #aaa;
}

tbody:hover tr:hover td {
    color: #444;
    text-shadow: 0 1px 0 #fff;
}*/
