/*  media queries in LayOutIt */


	/* Extra small devices (phones, less than 768px) */
	/* No media query since this is the default in Bootstrap */


	
	/* Small devices (phone, up to 480px) */
	@media (max-width:320px) {
		.img1 {display: none; }
		.img2 {display: block; margin: 0 auto;}
		.HiringImageSmall {display: block; margin: 0 auto;}
		.HiringImageLarge {display: none;}
		.TheCarousel {display: none;}	
		.MainLogoTextSize {color: #0078B9; font-size: x-large;}
		.wider2 {width: 250px;}
        .HPImg { width: 80%; height: 80%; }
        .HPImg2 { width: 60%; height: 60%; }
      
	}
	
	@media (min-width:321px) and (max-width: 500px) {
		.img1 {display: none; }
		.img2 { display: block; margin: 0 auto;}
		.HiringImageSmall {display: block; margin: 0 auto;}
		.HiringImageLarge {display: none;}
		.TheCarousel {display: none;}
		.MainLogoTextSize {color: #0078B9; font-size: x-large;}
		.wider2 {width: 250px;}
        .HPImg { width: 70%; height: 70%; }
        .HPImg2 { width: 50%; height: 50%; }
       
	 }
	
	/* Small devices (phone, up to 767px) */
	@media (min-width: 501px) and (max-width:767px) {
		.img1 {display: block; margin: 0 auto; }
		.img2 {display: none; }
		.HiringImageSmall {display: none;}
		.HiringImageLarge {display: block; margin: 0 auto;}
		.TheCarousel {display: none;}
		.MainLogoTextSize {color: #0078B9; font-size: x-large;}
		.wider2 {width: 400px;}
        .HPImg { width: 40%; height: 40%; }
        .HPImg2 { width: 30%; height: 30%; }
	 }


	/* Small devices (tablets, 768px and up) */
	@media (min-width: 768px) and (max-width: 1023px) {

		.img1 { display: block; margin: 0 auto; }
		.img2 {display: none;}
		.HiringImageSmall {display: none;}
		.HiringImageLarge {display: block; margin: 0 auto;}
		.TheCarousel {display: none;}
		.MainLogoTextSize {color: #0078B9; font-size: x-large;}
		.wider2 {width: 500px;}
        .NoShowIt { display: none;} 
        .HPImg { width: 40%; height: 40%; }
        .HPImg2 { width: 30%; height: 30%; }
        
	 }

	
		/* Medium devices (desktops, 992px and up) */
	@media (min-width: 1024px) and (max-width: 1199px) {

		.img1 {display: block; margin: 0 auto; }
		.img2 {display: none;}
		.HiringImageSmall {display: none;}
		.HiringImageLarge {display: block; margin: 0 auto;}
		.TheCarousel {display: none;}
		.MainLogoTextSize {color: #0078B9; font-size: x-large;}
		.wider2 {width: 600px;}
        .NoShowIt { display: none;} 
        .HPImg { width: 60%; height: 60%; }
        .HPImg2 { width: 40%; height: 40%; }
	 }

	
	/* Large devices (large desktops, 1200px and up) */
	@media (min-width: 1200px) {

		.img1 { display: block; margin: 0 auto;}
		.img2 {display: none; }
		.HiringImageSmall {display: none;}
		.HiringImageLarge {display: block; margin: 0 auto;}
		.TheCarousel {display: none;}
		.MainLogoTextSize {color: #0078B9; font-size: x-large;}
		.wider2 {width: 700px;}
        .NoShowIt { display: none;} 
        .HPImg { width: 60%; height: 60%; }
        .HPImg2 { width: 30%; height: 30%; }
	}