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


/* desktop */
@media (min-width: 1000px) {

	.mbgaccordionlist-contain { }
	.mbgaccordionlist-wrap { display: flex; flex-flow: row wrap; justify-content: space-between; }
	.mbgaccordionlist-wrap * { transition: .2s ease; opacity: .99; line-height: 1.1; text-decoration: none; }

	.mbgaccordionlist { background-size: cover; background-position: center; height: 300px; background-repeat: no-repeat; display: flex; flex-flow: row wrap; overflow: hidden; position: relative; border-top: 4px solid #fff; border-bottom: 4px solid #fff; }
	.mbgaccordionlist-contentwrap { background-color: rgba(255,255,255,.8); margin-top: .5em; padding: 1em; overflow: hidden; transition-delay: .2s; transition: .4s ease; position: relative; justify-content: center; display: flex; flex-direction: column; }
	.mbgaccordionlist-content { display: block; }

	.mbgaccordionlist-head { display: block; }
	.mbgaccordionlist-text { display: block; color: #000; line-height: 1.5; }
	.mbgaccordionlist-button { display: inline-block; color: #fff; }

	.mbgaccordionlist-wrap:hover .mbgaccordionlist.active,
	.mbgaccordionlist { flex-basis: calc(25% - 3px); }
	.mbgaccordionlist-wrap:hover .mbgaccordionlist.active:hover,
	.mbgaccordionlist.active,
	.mbgaccordionlist:hover { flex-basis: calc(50% - 3px); }

	.mbgaccordionlist-wrap:hover .mbgaccordionlist.active .mbgaccordionlist-contentwrap,
	.mbgaccordionlist-contentwrap { width: 20vw; left: calc(-20vw - 2em); }

	.mbgaccordionlist.active .mbgaccordionlist-contentwrap,
	.mbgaccordionlist-wrap:hover .mbgaccordionlist.active:hover .mbgaccordionlist-contentwrap,
	.mbgaccordionlist:hover .mbgaccordionlist-contentwrap { left: 0; }
}

/* tablet */
@media screen and (max-width: 1000px) and (min-width: 783px) {
	.mbgaccordionlist { background-size: cover; background-position: center; margin: .5em 0; padding: 1em 0 0; }
	/*.mbgaccordionlist:nth-child(even) { text-align:right; } */
	.mbgaccordionlist-contentwrap { background-color: rgba(255,255,255,.8); display: inline-block; text-align: left; width: 40%; padding: 2em; }
}

/* single column */
@media (max-width: 782px) {
	.mbgaccordionlist { background-size: cover; background-position: center; margin: .5em 0; text-align: center; padding: 1em; }
	.mbgaccordionlist-contentwrap { background-color: rgba(255,255,255,.8); padding: 2em; }
}