/*
    Mosaic - Sliding Boxes and Captions jQuery Plugin
    Version 1.0.1
    www.buildinternet.com/project/mosaic
    
    By Sam Dunn / One Mighty Roar (www.onemightyroar.com)
    Released under MIT License / GPL License
*/

* {
    margin:0;
    padding:0;
    border:none;
    outline:none;
}

/*General Mosaic Styles*/
.mosaic-block {
    float:left;
    position:relative;
    overflow:hidden;
    width:330px;
    height:245px;
    margin:0 0 20px 0;
    /*-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);*/
    -moz-box-shadow: 0 0 4px #000;
    -webkit-box-shadow: 0 0 4px #000;
    box-shadow: 0 0 4px #000;
}

    .mosaic-backdrop {
        display:none;
        position:absolute;
        top:0;
        height:100%;
        width:100%;
        background:#111;
    }
    
    .mosaic-overlay {
        display:none;
        z-index:5;
        position:absolute;
        width:100%;
        height:100%;
        background:#111;
    }
    
        /*** Custom Animation Styles (You can remove/add any styles below) ***/
        .bar .mosaic-overlay {
            bottom:-100px;
            height:100px;
            background:url('../images/bg-black.png');
        }
        
        .bar2 .mosaic-overlay {
            background: transparent url('../images/mosaic-bg.png') repeat left top;
            bottom:-171px;
            height:221px;
            /*opacity:0.8;*/
            padding: 12px 15px;
            /*-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
            filter:alpha(opacity=80);*/
            width: 300px;
        }
        
        .bar2 .mosaic-overlay.extra {
            bottom:-142px;
            height:221px;
            /*opacity:0.8;*/
            /*-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
            filter:alpha(opacity=80);*/
        }
        
            .bar2 .mosaic-overlay:hover {
                background: transparent url('../images/mosaic-bg.png') repeat left top;
                /*opacity:1;
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
                filter:alpha(opacity=80);*/
            }
            
            .bar2 a {
                text-decoration: none;
            }
        
        .bar3 .mosaic-overlay {
            top:-100px;
            height:100px;
            background:url(../img/bg-black.png);
        }
        /*** End Animation Styles ***/
        
@media only screen and (min-width: 768px) and (max-width: 991px) {

.mosaic-block {
    width:241px;
    height:179px;
}

        .bar2 .mosaic-overlay {
            bottom: -122px;
            height:155px;
            width: 211px;
        }

}


/*************************************************************************************************************************
* LAYOUT #4 LAYOUT #4 LAYOUT #4 LAYOUT #4 LAYOUT #4 LAYOUT #4 LAYOUT #4 LAYOUT #4 *LAYOUT #4 LAYOUT #4 LAYOUT #4 LAYOUT #4 *
*************************************************************************************************************************/ 


/*      Mobile Layout: 320px.
        Gutters: 24px.
        Outer margins: 34px.
        Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 767px) {
    
.mosaic-block {
    width:223px;
    height:167px;
    margin:0 10px 20px 0;
}

    .bar2 .mosaic-overlay {
            background: transparent url('../images/mosaic-bg.png') repeat left top;
            bottom:-28px;
            height:61px;
            /*opacity:0.8;*/
            padding: 12px 15px;
            /*-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
            filter:alpha(opacity=80);*/
            width: 193px;
        }

}