/* CSS Document */
/* Melbourne Bushwalkers First Aid Kit Page CSS */
#para-1 {
	max-width: 900px;
	margin-left:auto;
	margin-right:auto;	
}

.responsive-image {
	width: 250px;
	float:right;;
	margin-top: 30px;
	margin-left: 20px;
	border: 0;
}

ul {
	padding-left: 10px;
	margin-left: 30px;
}

/* Start media queriers for different device sizes */
	/* Smaller device widths, including smart phones in portrait mode */
	@media only screen and (max-width: 600px)  and (orientation: portrait) {
	   #content-container {
			grid-template-rows: minmax(100px, auto) repeat(3, minmax(50px, auto));	
	   }
	   .page-title {
			padding: 0 10px;
	   }
	   .responsive-image {
			max-width: 25%;
	   }
		#para-1 {
		grid-column: 1 / span 12;
		grid-row: 3/ span 1;
		padding: 0 10px;
		margin-top: -20px;
		}
}

	/* Medium devices (tablets, 600px and up) */
	@media only screen and (min-width: 601px)  and (orientation: portrait) {
	   #content-container {
			grid-template-rows: minmax(120px, auto) repeat(3, minmax(50px, auto));	
	   }
	   	   .page-title {
			padding: 0 10px;
	   }
	   .responsive-image {
			max-width: 25%;
	   }
		#para-1 {
			grid-column: 1 / span 12;
			grid-row: 3/ span 1;
			padding: 0 10px;
		}
}

	/* Large devices (desktops, 992px and up) */
	@media only screen and (min-width: 992px)  and (orientation: portrait){ 
		#content-container {
				grid-template-rows: minmax(120px, auto) repeat(2, minmax(50px, auto));	
		}
		#para-1 {
			grid-column: 1 / span 12;
			grid-row: 2/ span 1;
		}
}

	/* Small devices (landscape phones, 767px and below) */
	@media only screen and (max-width: 767px)  and (orientation: landscape) {
	   #content-container {
			grid-template-rows: minmax(140px, auto) repeat(2, minmax(50px, auto));	
	   }
	   	   .page-title {
			padding: 0 10px;
	   }
	   .responsive-image {
			max-width: 25%;
	   }
		#para-1 {
			grid-column: 1 / span 12;
			grid-row: 3/ span 1;
			padding: 0 10px;
		}
	}

	/* Medium devices (iPhoneX Landscape mode, ) */
	@media only screen and (min-width: 768px) and (orientation: landscape) {
	   #content-container {
			grid-template-rows: minmax(100px, auto) repeat(2, minmax(50px, auto));	
	   }
	   	.page-title {
			padding: 0 10px;
	   }
	   .responsive-image {
			max-width: 25%;
	   }
		#para-1 {
			grid-column: 1 / span 12;
			grid-row: 3/ span 1;
			padding: 0 10px;
		}
}

	/* Larger devices (Landscape mode) */
	@media only screen and (min-width: 992px) and (orientation: landscape) {
	   #content-container {
			grid-template-rows: minmax(100px, auto) repeat(2, minmax(50px, auto));	
	   }
	  #para-1 {
		grid-column: 1 / span 12;
		grid-row: 2/ span 1;
	  }
}

	/* Large devices (desktops, 1200px and up) */
	@media only screen and (min-width: 1200px) { 
		#content-container {
			max-width: 1200px;
		}
} 

	/* Extra large devices (large desktops, laptops, 1200px and up) in landscape mode*/
   @media only screen and (min-width: 1200px) {
	   
}
		
	/* Extra large devices (large desktops, laptops, 1200px and up) in portrait mode */
   @media only screen and (min-width:800px) and (min-height: 1200px) {
	   
}
		
	/* Super large devices (4k TV, 1200px and up) in portrait mode */
   @media only screen and (min-width: 2000px) {
	   
}