#app-container {
	width: 100%;
	height: 100%;
	background-color: #8f3e3f;
	position: relative;
}
#app-container{
	background-color: #fbd133 !important;
	
}  

.bb canvas {
	width: 100%;
	height: 100%;
	
}

.bb #canvas {
	position: relative;
	z-index: 10;
}

.bb #physics {
	
	position: absolute;
	top: 0;
	left: 0;
	background: transparent !important;
	z-index: 20;
	width: 100% !important;

}

.bb button {
	position: absolute;
	top: 50%;
	z-index: 100;
}

.bb button#ctrlLeft {
	left: 80px;
}

.bb button#ctrlRight {
	right: 80px;
}

.bb button#ctrlLeft{
	z-index: 9999999;
	width: 10%;
	left: 0px;
	height: 100%;
	top: 0px;
	border: none;
	outline: none;
	color: white;
	background: transparent !important;
	font-size: 100px;
	opacity: 1;
}
.bb button#ctrlRight{
	z-index: 9999999;
	width: 10%;
	right: 0px;
	height: 100%;
	top: 0px;
	border: none;
	outline: none;
	color: white;
	background-color: transparent !important; 
	font-size: 100px;
	opacity: 1;
}
.bb .slider {
	width: 100%;
	background: red;
	padding: 100px 0;
	margin: 100px auto;
	background: #edd7df;
	background-color: transparent;
	position: absolute;
	top: 0px;
	z-index: 999;
	padding-bottom: 0px;
	margin-bottom: 0px;
	padding-top: 50px;
}
.bb .slick-slider .slick-track,.bb  .slick-slider .slick-list{
	padding: 0px !important;
}
.bb .slick-slide img {
	width: 100%;
}
.bb .top-img,.bb .text,.bb .slick-prev,.bb .slick-next{
	display: none !important;
}
.bb .slick-slide{
	outline: none;
}
.bb .slick-track {
	height: 450px;
}
.bb .slick-slide.slick-current.slick-active.slick-center a img.bottom-img{
	transform: scale(1);
	margin-top: 33px;
	margin-top: 224px;
	transition: transform 0.5s;
}
.bb .slick-slide img.bottom-img {
	transform: scale(0.5);
	transition: transform 0.5s;
	margin-top: 224px;
}
.bb .slick-slide.slick-current.slick-active.slick-center a span {
	display: block;    
	display: block;
	z-index: 9999;
	position: relative;
	opacity: 1;
	transition: opacity 2.5s;
	opacity: 0;
}
.bb .slick-track {
	height: 545px;
}
.mob-client-img{
	transform: scale(0);
	height: 0px;
	z-index: 0;
}
.bb .slick-slide img.bottom-img,.bb .slick-slide.slick-current.slick-active.slick-center a img.bottom-img{
	/*	margin-top: 180px;*/
} 
@media (min-width: 1199px){
	#app-container .view-more{
		margin: -40px 40px 40px 40px !important;	
	}
}
@media screen and (max-width: 993px) and (min-width: 100px){
	#app-container canvas{
		display: none;
	} 
	.bb .slider{ 
		position: relative;
		transform: scale(0.8);
		margin: 0px;
	}
	.bb .slick-track{
		height: initial !important;
	}
	.mob-client-img{
		transform: scale(0);
		height: initial;
		opacity: 0;
		width: 50% !important;
		margin-left: 25% !important;
	}
	.slick-center .mob-client-img{
		top: 0px !important;
		position: relative;
		transform: scale(1) !important;
		transition: transform 2s;
		height: initial; 
		opacity: 1;
	} 

	.slick-slide img.bottom-img{
		margin-top: 0px !important;
		width: 50% !important;
		margin-left: 25% !important;
	}
}
@media screen and (max-width: 479px) and (min-width: 100px){
	.bb .slick-slide.slick-current.slick-active.slick-center a img.bottom-img,img.bottom-img{
		width: 50% !important;
		margin-left: 25% !important;
	}
	.bb button#ctrlRight,.bb button#ctrlLeft{
		font-size: 50px;
	}