/* iPad in landscape */
@media 	only screen 
		and (min-device-width : 768px) 
		and (max-device-width : 1024px) 
		and (orientation : landscape) { 


}

/* iPad both orientations */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
	
	
}

@media all and (orientation: landscape) {
	

}

@media all and (orientation: portrait) {

	#lottie {
	    width: 200%;
	    height: 200%;
	    transform: translate3d(-25%,-25%,0);
	}
	
	#lottie:after {
		content: '';
		position: absolute;
		z-index: 20;
		top: 25%; left: 25%; bottom: 25%; right: 25%;
		box-shadow: inset 0px 0px 150px #000;
	}

}


/* beneath md */
@media (max-width: 768px) { 

}
	
/* BREAKPOINT-MD */
@media (min-width: 768px) {

}

/* BREAKPOINT LG */
@media (min-width: 992px) { 
	
	#lottie:after {
		content: '';
		position: absolute;
		z-index: 20;
		top: 0; left: 0; bottom: 0; right: 0;
		box-shadow: inset 0px 0px 300px #000;
	}
}

/* BREAKPOINT LG ++ PORTRAIT */
@media (min-width: 992px) and (orientation : portrait) { 

	#lottie:after {
		content: '';
		position: absolute;
		z-index: 20;
		top: 0; left: 0; bottom: 0; right: 0;
		box-shadow: inset 0px 0px 450px #000;
	}

}

/* BREAKPOINT XL */
@media (min-width: 1200px) {
	
	#lottie:after {
		content: '';
		position: absolute;
		z-index: 20;
		top: 0; left: 0; bottom: 0; right: 0;
		box-shadow: inset 0px 0px 600px #000;
	}
	
}

/* IE */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

}