@charset "UTF-8";
/* CSS Document */

.jhpMasonryItem {margin-bottom: 10px; transition: opacity 200ms 300ms; position: relative;}
.jhpMasonryItem.jhpMasonryHidden {opacity: 0;}
.jhpMasonryContent {max-width: 568px;}


.jhpMasonryItem div.beschreibung {position: absolute; bottom: 0; width: 100%; padding: 5px 15px;; background-color: rgba(255,255,255,0.85); opacity: 0; transition-duration: 1000ms;}
.jhpMasonryItem:hover div.beschreibung {opacity: 1;}


.jhpMasonryContent2Column {display: flex; max-width: 992px;}
.jhpMasonryContent2Column.jhpMasonryHidden {display: none;}
.jhpMasonryContent2Column .jhpMasonryColumn1 {width: 50%; padding-right: 5px;}
.jhpMasonryContent2Column .jhpMasonryColumn2 {width: 50%; padding-left: 5px;}

.jhpMasonryContent3Column {display: flex; }
.jhpMasonryContent3Column.jhpMasonryHidden {display: none;}
.jhpMasonryContent3Column .jhpMasonryColumn1 {width: 33.33%; padding-right: 5px;}
.jhpMasonryContent3Column .jhpMasonryColumn2 {width: 33.33%; padding-right: 5px; padding-left: 5px;}
.jhpMasonryContent3Column .jhpMasonryColumn3 {width: 33.33%; padding-left: 5px;}


@media (min-width: 576px) { 
	.jhpMasonryContent.jhpMasonryHidden {display: none;}
	.jhpMasonryContent2Column.jhpMasonryHidden {display: flex;}

}

@media (min-width: 768px) { 

}

@media (min-width: 992px) {
	.jhpMasonryContent2Column.jhpMasonryHidden {display: none;}
	.jhpMasonryContent3Column.jhpMasonryHidden {display: flex;}

}

@media (min-width: 1200px) {

}