/* CSS Styles für Mosaik (statisch)  */

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

#mosaik *{
    box-sizing: border-box;
}   


#mosaik .mosaik-frame {
    display: inline;
    margin: auto;
    overflow: hidden;
}

#mosaik .piece {
    height: 100px;
    float: left;
    transition: .5s ease;
    opacity: 1;
    width: 100px;
}

#mosaik .caption{
    position: relative;
    width: 100px;
    height: 100px;
    top:-100px; left:0; right:0;
    background: rgba(186, 34, 130, 0.7);
    transition: all 500ms ease;
}

#mosaik .caption-text {
    bottom: 0;
    color:white;
    font-family: 'Roboto Condensed', sans-serif;
    left: 0;
    padding:0.7em;
    position: absolute;
}

#mosaik .box{
    float: left;
    width:100px;
    height:100px;
    position:relative;
    overflow:hidden;
}

#mosaik .box:hover .caption{
    top:0;
    height:100%;
}

div .mosaik-container {
    display: table;
    margin: auto;
    width: 400px;
}

#mosaik .caption-mobile{
        height: 100%;
        top: 0;
    }