/*Portrait Tablet Exceptions to adjust padding in content areas.*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}
/*Landscape Tablet Exceptions to adjust padding and reduce font size. When a tablet is turned sideways, 
the text will appear larger so this query contains rules that reduces the font-size and padding.*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}

/* this is a hack to allow fixed width on everything EXCEPT for phones (below) */
@media only screen and (min-device-width : 680px){
}


/* For Narrow Browser Windows (between 0 and 679 pixels) and Smartphones in both orientations. */
@media only screen and (min-width: 0px) and (max-width: 679px) {
	.wrapper{
		width: 100%;
	}
	#headercontainer,#header{
		position: relative;
		height: auto;
		width: 96%;
		padding: 0 2% 0 2%;
	}
	#search{
		display: none;
	}
	#social{
		right: 0px;
		top: 70px;
	}
	#logo img{
		max-width: 90%;
		height: auto;
	}
	h1{
		font-size: 160%;
	}
	h2{
		font-size: 140%;
	}
	
	#calloutontainer{
		margin-bottom: 20px;
	}
	#callout1,
	#callout2,
	#callout3{
		width: 92%;
		height: auto;
		float: left;
		padding: 0;
		margin: 0 1% 10px 1%;
		padding: 2%;
	}

	#content_left{
		float: left;
		width: 96%;
		padding: 0 2% 0 2%;
		text-align: left;
	}
	#content_left .nav{
		display: none;
	}
	#content_right{
		float: left;
		width: 96%;
		text-align: left;
		padding: 20px 2% 20px 2%;
	}
	#content_right img{
		max-width: 99%;
		display: block;
		margin-left: auto!important;
		margin-right: auto!important;
		float:none!important;
		height: auto;
	}
	.readon, .readmore{
		padding: 0px 9px 0px 10px;
	}
	a.readon {
		padding: 5px 9px 5px 9px;
	}	
	/* blog x 2 */
	.blog .cols-2 .item.column-1,
	.blog .cols-2 .item.column-2,
	.blog .cols-3 .item.column-1,
	.blog .cols-3 .item.column-2,
	.blog .cols-3 .item.column-3{
		width: 98%;
		margin: 0 1% 10px 1%;
	}
	
	/* blog masonry */
	.blog_masonry .item {
		width: 98%;
		margin: 0 1% 10px 1%;
	}
	.blog_masonry .item-info {
		width: 92%;
		padding: 10px 2% 10px 2%;
		margin: 0 1% 0 1%;
		border: 1px solid #ddd;
	}
	#footercontainer{
		width: 96%;
		text-align: left;
		padding: 0 2% 0 2%;
	}
}