_responsive.scss

// responsive mixin
@mixin responsive( $fontsize, $siteTitle ) {
	body {
		font-size: $fontsize;
	}
	
	p {
		paddin: 5px;	
	}

	.site-branding {
		a {
			font-size: $siteTitle;		
		}	
	}

	.content-area {
		float: left;
		margin: 0 0 0 0;
		width: 100%;
	}
	.site-main {
		margin: 0 0 0 0;
	}
	.site-content .widget-area {
		clear: both;
		overflow: hidden;
		width: 100%;
	}
	.site-footer {
		clear: both;
		width: 100%;
	}
	img {
		max-width: 100%;
	}
} // end responsive


/**
 * PC, Laptop
 **/
.content-area {
	float: left;
	margin: 0 -25% 0 0;
	width: 100%;
}
.site-main {
	margin: 0 25% 0 0;
}
.site-content .widget-area {
	float: right;
	overflow: hidden;
	width: 25%;
}
.site-footer {
	clear: both;
	width: 100%;
}

// header image
#masthead {
	img {
		width: 100%;
		height: auto;
	}
}


/*!
 * MEDIA QUERIES
 **/
@media all and (min-width:960px) and (max-width: 1024px) {
  @include responsive( 100%, 2rem  ); // sidebar to bottom);
}

@media all and (min-width:801px) and (max-width: 959px) {
	@include responsive( 100%,2rem  ); // sidebar to bottom);
}

@media all and (min-width:769px) and (max-width: 800px) {
 @include responsive( 103%,2rem  ); // sidebar to bottom);
}

@media all and (min-width:569px) and (max-width: 768px) {
   @include responsive( 100%,1.5rem  ); // sidebar to bottom);
}

@media all and (min-width:481px) and (max-width: 568px) {
    @include responsive( 100%,1.3rem  ); // sidebar to bottom);
}

@media all and (min-width:321px) and (max-width: 480px) {
   @include responsive( 100%,1rem  ); // sidebar to bottom);
}

@media all and (min-width:0px) and (max-width: 320px) {
   @include responsive( 90%,.8rem  ); // sidebar to bottom); // sidebar to bottom
}