.mb2-pb-events {
	--mb2-pb-color1: var(--mb2-pb-accent1);
	--mb2-pb-color2: var(--mb2-pb-accent3);
}	

.mb2-pb-events-items {
	display: none;
}

.pm-am {
	text-transform: lowercase;
}

.event-name {
	margin: 0;
}

.event-date {
	display: flex;
    flex-flow: column;
    justify-content: space-between;
	text-align: center;	
	line-height: 1;

	span {
		display: inline-flex;
		justify-content: center;

		&.month {
			text-transform: uppercase;
			font-size: var(--mb2-pb-fssmall);
		}

		&.day {
			font-weight: var(--mb2-pb-fwbold);
			font-size: 2rem;
		}
	}	

}

.event-duration {
	font-size: var(--mb2-pb-fssmall);
}



.mb2-pb-content-list {


	&.layout1 {

		.event-item {
			margin-bottom: 1.4rem;
			padding-bottom: 1.4rem;
			border-bottom: solid 1px rgba(0,0,0,.1);

			&:last-child {
				margin-bottom: 0;
				padding-bottom: 0;
				border-bottom: 0;
			}
		}

		.event-item-inner {
			display: flex;
			flex-flow: row;
			align-items: center;
		}

		.event-date {
			width: 3.2rem;
    		color: var(--mb2-pb-headingscolor);
			margin-right: .5rem;

			.month {
				color: var(--mb2-pb-textcolor_lighten);
				align-items: flex-start;				
			}

			.day {
				align-items: flex-end;				
				margin-top: .3rem;
			}		
			
		}

		.event-name {
			font-size: 1.16rem;
		}

		.event-duration {
			color: var(--mb2-pb-textcolor);
			margin-bottom: .35rem;


			i {
				display: inline-flex;
				flex: 0 0 1.8rem;
				width: 1.8rem;
				align-items: center;
				justify-content: center;
				background-color: rgba(0,0,0,.05);
				border-radius: 20%;
				margin-right: .45rem;
			}
		}

	}



	&:not(.layout1) {

		


		.event-item-inner {
			position: relative;
			min-height: 200px;
			display: flex;
			flex-flow: column;
			justify-content: flex-end;
			@include gradient-y(rgba(0,0,0,.055), transparent);
		}

		.event-name {
			color: #fff;
		}


		.event-content {
			background-color: var(--mb2-pb-color1);
			padding: 1.3rem;
			margin-right: 3rem;
			margin-top: -2.2rem
		}

		.event-duration {
			color: rgba(255,255,255,.4);
			margin-bottom: .22rem;			

			i {
				display: none;
			}
		}



		/* ================= EVENT DATE */

		.event-date {		
			
			width: 4.6rem;
			height: 4.6rem;
			background-color: #fff;
			color: var(--mb2-pb-headingscolor);			
			box-shadow: 0 15px 10px rgb(0 0 0, .1);			
			position: absolute;
    		top: 13px;
    		right: 13px;
		
			  span {
				
				align-items: center;    		

				&.month {
					color: #fff;
					background-color: var(--mb2-pb-color2);
    				height: 1.6rem;
				}
		
				&.day {
					height: 2.6rem;
				}
			  }	
		}


	}
}


/* ================= EVENT MODAL WINDOW */

.event-modal-item {

	display: flex;
    flex-flow: row;
    align-items:center;
    padding: 1.8rem;
	@include mb2_transition1(opacity, .25s);


	@media only screen and (min-width: $wmediumdevice){

		.event-image {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 0 0 300px;
			width: 300px;
			height: 300px;
			border-radius: 50%;
			background-position: 50% 50%;
			background-repeat: no-repeat;
			background-size: cover;
			@include gradient-directional(rgba(0,0,0,.15), transparent);

			i {
				font-size: 5rem;
    			color: rgba(0,0,0,.1);
			}
		}

		.event-content {
			flex: 0 0 calc(100% - 300px);
			width: calc(100% - 300px);
			padding-left: 1.8rem;
		}

	}
}

.event-details {
    margin-top: 3rem;
    font-weight: var(--mb2-pb-fwbold);
    color: var(--mb2-pb-headingscolor);
    line-height: 1.1;
}

.event-detail {
    margin-bottom: 1.15rem;
    display: flex;
    flex-flow: row;
    align-items: center;
}

.event-detail i {
    margin-right: .8rem;
    position: relative;
    font-size: 1.45rem
}


.event-modal-content {

	position: relative;	

	&:after {
		opacity: 0;
		content: '';
		position: absolute;
		width: 50px;
		height: 50px;
		top: 50%;
		left: 50%;
		margin-left: -25px;
		margin-top: -25px;
		background-image: var(--mb2-pb-spinner);
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: cover;
		@include mb2_transition1(opacity, .25s);
		z-index: 1;
	}

	.modal.loading & {

		&:after {
			opacity: 1;
		}

		.event-modal-item {
			opacity: 0;
		}
	}
}