/* = Masonry = */
.el-grid .grid-container-wrapper:before, 
.el-grid .grid-container-wrapper:after {
    content: "";
    display: table;
}
.el-grid .grid-container-wrapper:after {
	clear: both;
}
.el-grid .masonry-grid-sizer,
.el-grid .el-linkbox {
	width: calc((100% / 3) - 0.6666666666rem);
}
.el-grid .masonry-grid-gutter{
	width: 1rem;
}
.el-grid .el-linkbox {
	display: block;
	float: left;
	margin-bottom: 1rem;
}
.el-grid .el-linkbox:nth-child(3) .bhElementInner {
	padding-top: 15rem;
}
.el-grid .el-linkbox:nth-child(5) .bhElementInner {
	padding-top: 5rem;
}


/* EDITING MASONRY */

.bhe-state-editing .el-grid .masonry-grid {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	height: auto !important;
}
.bhe-state-editing .el-grid.bhElement .grid-container .el-linkbox.bhElement {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	display: block;
	float: none;
	margin: 0.5rem !important;
	width: calc((100% / 3) - 1rem);
}

/* BE-MODE IN GRID --> margin */

.bh-bemode .el-grid .el-linkbox.bhElement {
	margin-bottom: 1rem;
}

/* FE-MODE INIT */
.bh-femode .el-grid {
	opacity: 0;
	transition: ease-in-out opacity 0.3s;
}
.bh-femode .el-grid.masonry-initialized {
	opacity: 1;
}

@media only screen and (max-width:960px) {
	.el-grid .masonry-grid-sizer,
	.el-grid .el-linkbox {
		width: calc(50% - 0.5rem);
	}
	.el-grid .el-linkbox:nth-child(5) .bhElementInner {
		padding-top: 0rem;
	}
}

@media only screen and (max-width:700px) {
	.content-inner > .bhContainer > .el-grid:not(.bh-width-max) {
		width: calc(100% + 6rem);
		margin-left: -3rem;
	}
	/* .content-inner > .bhContainer > .el-grid .masonry-grid-gutter {
		width: 3px;
	}
	.content-inner > .bhContainer > .el-grid .el-grid-item,
	.content-inner > .bhContainer > .el-grid .masonry-grid-sizer {
		margin-bottom: 3px;
		width: calc(50% - 1.5px);
	} */
}
@media only screen and (max-width:600px) {
	.el-grid .masonry-grid-sizer,
	.el-grid .el-linkbox {
		width: calc(50% - 0.2rem);
	}
	.el-grid .el-linkbox {
		margin-bottom: 0.4rem;
	}
	.el-grid .masonry-grid-gutter{
		width: 0.4rem;
	}
	.el-grid .el-linkbox:nth-child(3) .bhElementInner {
		padding-top: 5rem;
	}
}
@media only screen and (max-width:500px) {
	.content-inner > .bhContainer > .el-grid:not(.bh-width-max) {
		width: calc(100% + 3rem);
		margin-left: -1.5rem;
	}
}