/* This file contains CSS for swapping large and
 * small images as well as text wrapping CSS */

body { background-color: green; }

.introImage {
      display: block;
      margin-left: auto;
      margin-right: auto;
}

@media (min-width: 900px) {
	body { background-color: pink; }
	.introImage {
		display: block;
                margin-left: auto;
                margin-right: auto;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		background: url(/jainasolowarriorextralarge.jpg) no-repeat;
		width: 1008px; /* Width of new image */
		height: 1880px; /* Height of new image */
  		padding-left: 1008px; /* Equal to width of new image */
	}
}

@media (min-width: 600px) and (max-width: 900px) {
	body { background-color: red; }
	.introImage {
		display: block;
                margin-left: auto;
                margin-right: auto;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		background: url(/jainasolowarriorlarge.jpg) no-repeat;
		width: 321px; /* Width of new image */
		height: 600px; /* Height of new image */
  		padding-left: 321px; /* Equal to width of new image */
	}
}

 @media (min-width: 350px) and (max-width: 600px) {
 	body { background-color: blue; }
	.introImage {
		display: block;
                margin-left: auto;
                margin-right: auto;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		background: url(/jainasolowarriormedium.jpg) no-repeat;
		width: 257px; /* Width of new image */
		height: 480px; /* Height of new image */
  		padding-left: 257px; /* Equal to width of new image */
	}
 }