/************************************************
 * Grid
 ************************************************/
.grid_wrapper{margin: 0 0;}
.grid{position: relative; }
.grid_item{
    width: 100%; position: relative;  opacity: 1; visibility: visible;
    -webkit-transition: opacity 1s ease;
    -moz-transition: opacity 1s ease;
    -ms-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease;
}
.grid_item.grid_sizer{padding: 0 !important;}

.grid_item.grid_item_width0{
    width: 0 !important; height: 0 !important; padding: 0 !important;
    margin: 0 !important; border: 0 !important;
    opacity: 0; visibility: visible;
    -webkit-transition:  opacity 1s ease;
    -moz-transition: opacity 1s ease;
    -ms-transition:  opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease;
}


.grid_item .grid_image{
    position: relative; padding-bottom: 56.25%;
    display: block; margin-bottom: .5rem;
}

.grid_item .grid_cta .button{
    margin-bottom: 0;
}



/*
.grid_wrapper .grid_filter{
    text-align: left; padding: 1rem .625rem;
}
.grid_wrapper .grid_filter ul{margin: 0 -0.625rem; padding: 0; text-align: center; font-size: 0;}
.grid_wrapper .grid_filter li{display: inline-block; padding: .125rem; vertical-align: top; font-size: 1rem;}
.grid_wrapper .grid_filter a,
.grid_wrapper .grid_filter a:visited{
    color: #525c55; font-weight: 400; padding: .25rem .75rem .125rem; line-height: 1.6rem; border-radius: 2px;
    vertical-align: baseline; position: relative; display: block; background-color: #F4F4F4;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

.grid_wrapper .grid_filter a:hover,
.grid_wrapper .grid_filter a:focus{ background-color: #CCCCCC; }

.grid_wrapper .grid_filter .active a{ background-color: #0A0A0A; color: #FFFFFF; }
*/

/*###############################################
 # Medium and UP
 ###############################################*/
@media screen and (min-width: 40em) {
    .grid_wrapper{margin: 0 -0.9375rem;}
    .grid_item{width: 50%; padding: .9375rem; }

    /*
    .grid_wrapper .grid_filter{
        text-align: center; padding: 1rem .9375rem;
    }
    .grid_wrapper .grid_filter ul{margin: 0 -0.25rem; padding: 0; text-align: center;}
    .grid_wrapper .grid_filter li{display: inline-block; padding: .25rem; vertical-align: top;}
    */
}

/*###############################################
 # Large and UP
 ###############################################*/
@media screen and (min-width: 64em) {
    .grid_item{width: 33.333%;}
    
    /*
    .grid_wrapper .grid_filter{ text-align: center; padding: 1rem .9375rem; }
    */
}