/* We use this media query to add styles to any device that supports media queries */
@media only screen {
}

/* styles for Retina-type displays */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) { 

	#title_section {
	  background-image: url(../../images/header/ribbon_stripe_x2.png);
		-webkit-background-size: auto 48px ;
		-moz-background-size: auto 48px ;
		background-size: auto 48px ;
	}

	#ribbon_point {
	  background-image: url(../../images/header/ribbon_point_x2.png);
		-webkit-background-size: auto 48px ;
		-moz-background-size: auto 48px ;
		background-size: auto 48px ;
	}

}

/* Used to alter styles for screens at least 768px wide. */
@media only screen and (max-width: 768px) {
	
	#title_section, 
	#base {
	  border-radius: 0;
	}

	#main_navigation {
		display: none !important;
	}

	#mobile_navigation_toggle {
	  display: block;
	}

	h1#site_title {
	  font-size: 32px;
	  margin-top: 45px;
	}

	h2#site_slogan,
	h2#page_title {
	  font-size: 14px;
	  letter-spacing: -1px;
	}

	/* Adjusts padding for smaller devices */
	h1#site_title {
	  margin-left: 20px;
	}

	h2#site_slogan,
	h2#page_title {
	  padding-left: 20px;
	  padding-right: 15px;
	}

	#container {
	  padding: 25px 5px;
	}

	aside#sidebar {
		padding-top: 40px;
	}

	.social_badges {
	  padding-right: 20px;
	}

	#extrContent1_row,
	#extrContent2_row,
	#extrContent3_row {
	  padding: 25px 5px;
	}

	#extrContent4_row {
	  padding: 25px 5px;
	}
	

	/* Adjust head tag sizes on smaller screens */
	h1 {
	  font-size: 35px;
	  letter-spacing: -2px;
	}

	h2 {
	  font-size: 30px;
	  letter-spacing: -1px;
	}

	h3 {
	  font-size: 25px;
	  letter-spacing: -1px;
	}

	h4 {
	  font-size: 20px;
	  letter-spacing: 0px;
	}

	h5 {
	  font-size: 18px;
	}

	h6 {
	  font-size: 16px;
	}

}

/* Used to alter styles for screens at least 480px wide. */
@media only screen and (max-width: 480px) {

	#desktop_badges {
		display: none;
	}

	#mobile_badges {
		display: block;
		padding-right: 0;
	}

	#ribbon_point {
		display: none;
	}

	h1#site_title {
	  font-size: 26px;
	  margin-top: 45px;
	}

	h2#site_slogan,
	h2#page_title,
	#ribbon {
	  width: 100%;
	  float: none;
	}

	.image-left {
		float: none;
		margin-right: 0;
	}

	.image-right {
		float: none;
		margin-left: 0;
	}

}


/* Used to alter styles for screens at least 1280px wide. */
@media only screen and (min-width: 769px) {
	#mobile_navigation {
	  display: none !important;
	}

}


/* Apply styles to screens in landscape orientation */
@media only screen and (orientation: landscape) {}

/* Apply styles to screens in portrait orientation */
@media only screen and (orientation: portrait) {}

/* We also use Modernizr to add a .touch class to the body when applicable */
/* You can prepend this class to anything and it will style only for touch devices */
.touch .your-element {}