#canvas label, #canvas select, #canvas input{
	display: none;
}

#divPrev, #divNext{
	height: 100%;
	z-index: 1000;
}

#canvas figure img{
	height: 100%;
}


#target{
	z-index: 1000;
}
.bd-controls{
	z-index: 999;
}

#FullScreen:focus{
	display: block !important;
}

@media screen and (min-width: 1200px) {
	/*** Large (Desktop) ***/
	#divPrev, #divNext{
		width: 38px;
	}
	
	.image-wrapper{
		padding-left: 40px; 
		padding-right: 40px;
	}
	
	#prev .fa-layers, #next .fa-layers{
		font-size: 4em !important;
	}
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
	/*** Medium (Desktop) ***/
	#divPrev, #divNext{
		width: 38px;
	}
	
	.image-wrapper{
		padding-left: 40px; 
		padding-right: 40px;
	}
	
	#prev .fa-layers, #next .fa-layers{
		font-size: 4em !important;
	}
}


@media screen and (min-width: 768px) and (max-width: 991px) {
	/*** Small (Tablet) ***/
	#divPrev, #divNext{
		width: 28px;
	}
	
	.image-wrapper{
		padding-left: 30px; 
		padding-right: 30px;
	}
	
	#prev .fa-layers, #next .fa-layers{
		font-size: 3em !important;
	}
}



@media screen and (max-width: 767px) {
	/*** X-Small (Mobile) ***/
	
	#divPrev, #divNext{
		width: 18px;
	}
	
	.image-wrapper{
		padding-left: 20px; 
		padding-right: 20px;
	}
	
	#prev .fa-layers, #next .fa-layers{
		font-size: 2em !important;
	}
}

#prev, #next{
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: orange;
	cursor: pointer;
	cursor: hand;
	
	text-align: center;
	vertical-align: middle;
	z-index: 1000000;
	width: 38px;
}

#prev{
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
} 
#next{
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

#prev.disabled, #next.disabled{
	background-color: grey;
	cursor: not-allowed;
	tabindex: -1 !important;
}

#prev:not(.disabled):focus, #next:not(.disabled):focus, #prev:not(.disabled):hover, #next:not(.disabled):hover{
	background-color: red;
}

#prev:not(.disabled) .fa-layers, #next:not(.disabled) .fa-layers{
	color: orange;
	
	/*top: 40%;*/
}

#prev:not(.disabled):focus .fa-layers, #next:not(.disabled):focus .fa-layers, #prev:not(.disabled):hover .fa-layers, #next:not(.disabled):hover .fa-layers{
	color: red;
}

#canvas {
	position: relative; 
}

