/* CSS Document */


@media(min-width:1px) {
	
	#hotspots .grapWrapper, #hotspots .grapWrapper .grapListing{
		pointer-events: all!important;
	}
	#hotspots .grapWrapper .grapListing{
		grid-auto-flow: row; max-width: 100%; grid-gap: 30px;
	}
	#hotspots .block{
		max-width: 100%;
		pointer-events: none; grid-column: span 1;
		display: grid; grid-template-columns:repeat(5, 1fr); grid-gap: 30px;
		align-content: flex-start; align-items: flex-start;
	}
	#hotspots .block .block-caption{
		grid-column: 1 / span 5; order: 2; padding: 0px;	
	}
	#hotspots .block:nth-of-type(1) .block-caption{
		grid-column: 1 / span 5;
	}
	#hotspots .block .block-image{
		grid-column: 1 / span 4; order: 1;	
	}
	

}

@media(min-width:600px) {
	
	#hotspots .block .block-image{
		grid-column: 1 / span 5; order: 1;	
	}
	

}

@media(min-width:960px) {
	
	#hotspots .grapWrapper, #hotspots .grapWrapper .grapListing{
		pointer-events: all!important;
	}
	#hotspots .grapWrapper .grapListing{
		grid-auto-flow: row; max-width: 100%;
		grid-template-columns:repeat(4, 1fr); grid-gap: 60px;
	}
	#hotspots .block{
		pointer-events: none; grid-column: span 2;
		display: grid; grid-template-columns:repeat(5, 1fr); grid-gap: 30px;
		align-content: center; align-items: center;
	}
	
	#hotspots .block .block-caption{
		grid-column: 2 / span 4; order: 2; padding: 0px;	
	}
	#hotspots .block .block-image{
		grid-column: 1 / span 2; order: 1;	
	}
	#hotspots .block .block-caption{
		grid-column: 2 / span 4; order: 2; padding: 0px;	
	}
	
	
	
	#hotspots .block:nth-of-type(3) .block-image{
		grid-column: 2 / span 3; order: 2;	
	}
	#hotspots .block:nth-of-type(3) .block-caption{
		grid-column: 2 / span 4; order: 1;
	}
	
	
	
	#hotspots .block:nth-of-type(4) .block-image{
		grid-column: 3 / span 3;
	}
	#hotspots .block:nth-of-type(4) .block-caption{
		grid-column: 1 / span 5;	
	}
	
	
	#hotspots .block:nth-of-type(5) .block-image{
		grid-column: 3 / span 2;
	}
	#hotspots .block:nth-of-type(5) .block-caption{
		grid-column: 1 / span 4;	
	}
	
	
	#hotspots .block:nth-of-type(6) .block-image{
		grid-column: 2 / span 3;
	}
	#hotspots .block:nth-of-type(6) .block-caption{
		grid-column: 2 / span 4;	
	}
	
	
	#hotspots .block:nth-of-type(7){
		 grid-column: span 3;
	}
	#hotspots .block:nth-of-type(7) .block-image{
		grid-column: 1 / span 2;
	}
	#hotspots .block:nth-of-type(7) .block-caption{
		grid-column: 3 / span 3;	
	}
	
	
	

}