/* Styles for blocks are used in both the frontend and admin - so be specific */


.mbgcollage-wrap { position:relative; }
.mbgcollage { position: relative; float: left; box-sizing: border-box; }

.mbgcollage-image { padding-bottom: calc(480 / 935 * 100% + 4px); height:0; background-size:cover; background-position:center; } /* 4px = border */

.mbgcollage img { width: 100%; }

.mbgcollage.mbg-video:before { content: '\f144'; font-family: 'Font Awesome 5 Free'; font-size: 4em; font-weight: 900; position: absolute; display: flex; align-items: center; justify-content: center; flex-direction: column; top: 0; bottom: 0; right: 0; left: 0; text-align: center; color: #fff; opacity: .4; transition: all .2s ease-in-out; }
.mbgcollage.mbg-video:hover:before { opacity: 0; }


.mbgcollage { position: relative; box-sizing: border-box; border-top:4px solid #fff; }
.mbgcollage-contain1 .mbgcollage { position: relative; border-bottom: 4px solid #fff; box-sizing: border-box; width: 100%; }

.mbgcollage-content { position: absolute; display: flex; padding:1em; align-items: center; justify-content: center; flex-direction: column; top: 0; bottom: 0; right: 0; left: 0; background-color: rgba(27, 54, 93, 0.8); text-align: center; color: #fff; opacity: 0; transition: all .2s ease-in-out; }

.mbgcollage:hover .mbgcollage-content { opacity: 1; }

.mbgcollage-content br { display: none; }

.mbgcollage .headline { font-size: 1.2em; font-weight: bold; }
.mbgcollage .summary { margin: .5em 0 1em; }


.mbgembed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.mbgembed-container iframe, .mbgembed-container object, .mbgembed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.mbgcollage-button { color:#000!important; }


@media (min-width: 1151px) { .mbgcollage-contain3 .mbgcollage:nth-of-type(1) { width: 67%; border-right: 2px solid #fff; }
	.mbgcollage-contain3 .mbgcollage:nth-of-type(2) { width: 33%; border-left: 2px solid #fff; }
	.mbgcollage-contain3 .mbgcollage:nth-of-type(3) { width: 33%; border-left: 2px solid #fff; border-top: 4px solid #fff }

}

@media (max-width: 1150px) and (min-width: 783px) {
	.mbgcollage-contain3 .mbgcollage:nth-of-type(1) { width: 100%; }
	.mbgcollage-contain3 .mbgcollage:nth-of-type(2) { width: 50%; border-right: 2px solid #fff; }
	.mbgcollage-contain3 .mbgcollage:nth-of-type(3) { width: 50%; border-left: 2px solid #fff; }
}

@media (min-width: 783px) {
	.mbgcollage-contain4 .mbgcollage:nth-of-type(1),
	.mbgcollage-contain4 .mbgcollage:nth-of-type(3),
	.mbgcollage-contain2 .mbgcollage:nth-of-type(1) { width: 50%; border-right: 2px solid #fff; }
	.mbgcollage-contain4 .mbgcollage:nth-of-type(2),
	.mbgcollage-contain4 .mbgcollage:nth-of-type(4),
	.mbgcollage-contain2 .mbgcollage:nth-of-type(2) { width: 50%; border-left: 2px solid #fff; }
}

@media (max-width: 782px) {
	.mbgcollage { position: relative; border-bottom: 4px solid #fff; box-sizing: border-box; width: 100%; }
}