#blbl {
	z-index: 0;
	opacity: 0;
	pointer-events: none;
	transition: 2s;
}



#blbl.active {
	display: block;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	opacity: 1;
	background: rgba(0,0,0,0.5);
	pointer-events: initial;
	transition: 2s;
	
}

.bllayers {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}


.bllayers .layer2 {
	background-image: url('smokeloop.gif');
	width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    position: absolute;
    display: block;
    background-size: cover;
    opacity: 0.2;
    mix-blend-mode: hue;
}


.bllayers .layer3 {
	background: linear-gradient(270deg, #000000, #b2002e);
    background-size: 400% 400%;

    -webkit-animation: gradtrans 42s ease infinite;
    -moz-animation: gradtrans 42s ease infinite;
    animation: gradtrans 42s ease infinite;
	mix-blend-mode: multiply;
	    min-width: 100%;
    height: 100%;
    mix-blend-mode: difference;
    opacity: 0.4;
}

@-webkit-keyframes gradtrans {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes gradtrans {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes gradtrans {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.blcon_wrap {
    height: calc(400px + 10vh);
}

.blcon_con {
	width: 400px;
    display: flex;
	align-items: center;
    position: relative;
    height: 400px;
    background: black;
    margin: auto;
    top: 10vh;
    border: 1px solid white;
	flex-direction: column;
}

@media screen and (max-width: 400px) {
	.blcon_con {
	width: 80vw;
	}
}

.blcon_nav {
	display: flex;
    width: 100%;
    height: 30px;
    justify-content: flex-end;
    margin-top: 9px;
    margin-right: 16px;
}

.blcon_close {
	width: 20px;
	height: 20px;
	background-image: url('close.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	cursor: pointer;
}

.blcon_bg { /*
	background-image: url('forest.png');
	background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom center;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0; */
}

.bccon_incon {
	text-align: center;
	font-size: 24px;
    padding: 20px;
}

.bccon_gfx {
	display: block;
	position: relative;
	width: 400px;
	height: fit-content;
	min-height: 260px;
	background-repeat: no-repeat;
	background-size: contain;
}

.blcon_1 .bccon_gfx {
	background-image: url('');
}
.blcon_2 .bccon_gfx {
	background-image: url('');
}
.blcon_3 .bccon_gfx {
	background-image: url('');
}

.eewr {
	    position: absolute;
}


.eewr.eewr_1 {
	right: 60px;
  bottom: 30%;
}

.eewr.eewr_2 {

  bottom: 530px;
  left: 30px;
}


.eewr.eewr_3 {

	left: 0;
  bottom: 0;
}

.eeob {
	display: block;
	position: relative;
	width: 35px;
	height: 35px;
	transition: 1.5s;
}



.eeob .layer {
	display: block;
	position: absolute;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
		width: 100%;
	height: 100%;
	cursor: help;
}


.eewr_1 .eeob .layer1 {
	background-image: url('pum1-b.png');
	opacity: 0;
	transition: 1.5s;

}
.eewr_2 .eeob .layer1 {
	background-image: url('pum1-bb.png');
	opacity: 0;
	transition: 1.5s;

}
.eewr_3 .eeob .layer1 {
	background-image: url('pum1-bbb.png');
	opacity: 0;
	transition: 1.5s;

}
.eewr_1 .eeob .layer2 {
	background-image: url('pum1-a.png');
	opacity: 0.3;
	mix-blend-mode: exclusion;
}	

.eewr_2 .eeob .layer2 {
	background-image: url('pum1-aa.png');
	opacity: 0.3;
}

.eewr_3 .eeob .layer2 {
	background-image: url('pum1-aaa.png');
	opacity: 0.3;
}

.eewr_3 .eeob:hover .layer1,
.eewr_2 .eeob:hover .layer1,
.eewr_1 .eeob:hover .layer1 {
	opacity: 1;
	transition: 0.5s;
}

.eewr .eeob:hover {
	width: 115px;
	height: 115px;
	transition: 1.5s;
}
.eewr_3 .eeob:hover .layer2,
.eewr_2 .eeob:hover .layer2,
.eewr_1 .eeob:hover .layer2 {
	mix-blend-mode: initial;
	transition: 0.5s;
}

/*
.smoke {
	background-image: url(noise1.jpg), url(noise2.jpg);
	background-blend-mode: difference, normal;
	animation: sliding 30s linear infinite;
}
*/

/*Left sided bats*/ 
.batscape {
	position: absolute;
	height: 100vh;
	max-width: 100vw;
	overflow-x: hidden;
	top: 0;
	bottom:  0;
	left: 0;
	right: 0;
	pointer-events: none;
}

.bat {
	display: block;
	position: absolute;
	width: 50px;
	height: 50px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	animation-fill-mode: both;
	animation-iteration-count: 3;
	animation-delay: 5s;
}
.bat1 {
	background-image: url('bat_left.gif');
		animation: sliding1 8s linear 5s;
		right: -100px;
		top: 50vh;
		animation-iteration-count: 3;
}

.bat2 {
	background-image: url('bat_left.gif');
		animation: sliding2 15s linear 2s;
		right: -100px;
		top: 30vh;
		width: 35px;
	height: 35px;
		animation-iteration-count: 4;
}

.bat3 {
	background-image: url('bat_left.gif');
		animation: sliding3 20s linear 8s;
		right: -100px;
		top: 90vh;
		width: 25px;
	height: 25px;
		animation-iteration-count: 2;
}

@keyframes sliding1 {
	0% { right: 0; top: 50vh; }
	100%  { right: 200%; top: -10vh; }
}

@keyframes sliding2 {
	0% { right: -100px; top: 30vh;  }
	100%  { right: 200%; top: -7vh;  }
}

@keyframes sliding3 {
	0% { right: -100px; top: 90vh;}
	100%  { right: 150%; top: 40vh;  }
}

/*Right sided bats*/


.bat4 {
	background-image: url('bat_right.gif');
		animation: sliding4 8s linear 5s;
		left: -100px;
		top: 70vh;
		animation-iteration-count: 2;
}

.bat5 {
	background-image: url('bat_right.gif');
		animation: sliding5 15s linear 2s;
		left: -100px;
		top: 30vh;
		width: 35px;
	height: 35px;
		animation-iteration-count: 4;
}

.bat6 {
	background-image: url('bat_right.gif');
		animation: sliding6 20s linear 8s;
		left: -100px;
		bottom: -10vh;
		width: 25px;
	height: 25px;
		animation-iteration-count: 3;
}

@keyframes sliding4 {
	0% { left: -100px; top: 70vh; }
	100%  { left: 200%; top: 30vh; }
}

@keyframes sliding5 {
	0% { left: -100px; top: 30vh;  }
	100%  { left: 200%; top: 60vh;  }
}

@keyframes sliding6 {
	0% { left: -100px; bottom: -10vh;}
	100%  { left: 150%; bottom: 50vh;  }
}

.home-event_id-983 .home_es_bg {
	animation-name: hallohome;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}

@keyframes hallohome {
	0% { background-size: 69%; }
	50% { background-size: 200%;  }
	100%  { background-size: 70%;  }
}