/*
 Theme Name:   Surfarama Child
 Theme URI:    http://google.com
 Description:  Surfarama child theme for the Breakfastmunkii site
 Author:       Rob C
 Author URI:   http://www.google.com
 Template:     surfarama
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         custom-menu, sticky-post, microformats, rtl-language-support, translation-ready, full-width-template, post-formats
 Text Domain:  surfarama-child
*/

#grid-wrap {
	margin-bottom: 50px;
}


/******************************************************************
MEDIA QUERIES & DEVICE STYLES
Developed by: Andy Clarke & the 320 & Up Extension
URL: http://stuffandnonsense.co.uk/projects/320andup/
Modified January 2018 by RC
******************************************************************/

@media only screen and (max-width: 6000px) {
	#container {
		width: 98%;
		max-width: 1024px;
	}
	
	#search-box {
		width: 98%;
		max-width: 1024px;
		padding: 0 1%;
	}
	
	#grid-wrap {
		width: 1024px;
	}
	
	.grid-box {
		width: 220px;
	}
	
	.grid-box.featured:first-child,
	.grid-box.latest {
		width: 220px;
	}	

}


@media only screen and (max-width: 824px) {
	
	#search-box #close-x {
		margin-right: 20px;	
	}
	
	#site-title {
		margin-right: 0;
	}

	#site-description {
		margin-right: 0;
	}
	
	nav[role=navigation] div.menu > ul, 
	div.menu > ul { 
		display:block !important;
	}	

		
	#main.col620 {
		width: 100%;
		display: block;
	}
	
	#site-heading { 
		width: 100%;
		float: none;
		text-align: center;
	}
	
	#social-media {
		display: block;
		padding-top: 0;
		text-align: center;
		margin: auto;
		float: none;
		width: auto;
	}
	
	#sidebar.col300 {
		float: none;
		display: block;
		width: 100%;
		clear: both;
		margin: 0;
	}
	
	.widget {
		margin: 35px 30px; /* for IE8 */
		margin: 2.2rem 30px;
	}
	
	#sidebar-home .widget {
		width: 96%;
		margin: 1.2%;
	}
	
	#sidebar .widget-title,
	#sidebar-home .widget-title {
		background-position: 98% center;
	}
	

}

@media only screen and (min-width: 824px) {
	nav[role=navigation] div.menu > ul, 
	div.menu > ul { 
		display:block !important;
	}
}

@media only screen and (max-width: 1023px) {

	#container {
		width: 98%;
		max-width: 800px;
	}
	
	#search-box {
		width: 98%;
		max-width: 800px;
		padding: 0 1.5%;
	}
	
	#grid-wrap {
		width: 800px;
	}
	
	.grid-box {
		width: 238px;
	}
	
	.grid-box.featured:first-child,
	.grid-box.latest {
		width: 238px;
	}

}



@media only screen and (max-width: 799px) {
	#container {
		width: 98.8%;
		max-width: 768px;
	}
	
	#search-box {
		width: 98.8%;
		max-width: 768px;
	}
	
	#grid-wrap {
		width: 768px;
	}
	
	.grid-box {
		width: 230px;
	}
	
	.grid-box.featured:first-child,
	.grid-box.latest {
		width: 230px;
	}
}


@media only screen and (max-width: 767px) {
	#container {
		width: 99%;
		max-width: 600px;
	}
	
	#search-box {
		width: 99%;
		max-width: 600px;
		padding: 0 2%;
	}
	
	#grid-wrap {
		width: 600px;
	}
	
	.grid-box {
		width: 275px;
		margin: 1.5% 0;
	}
	
	.grid-box.featured:first-child,
	.grid-box.latest {
		width: 275x;
	}

	.grid-box .format-video video, 
	.grid-box .format-video object,
	.grid-box .format-video embed,
	.grid-box .format-video iframe {
		max-height: 160px;
		min-height: 160px;
	}

}


@media only screen and (max-width: 599px) {
	#container {
		width: 98%;
		max-width: 480px;
	}
	
	#search-box {
		width: 98%;
		max-width: 480px;
	}
	
	#search-box #s {
		width: 280px;
	}
	
	#main #intro-text {
		padding: 0 2px 10px 2px;
		font-size: 18px; /* for IE8 */
		font-size: 1.1rem;	
	}
	
	#grid-wrap {
		width: 480px;
	}
	
	.grid-box {
		width: 215px;
	}
	
	.grid-box.featured:first-child,
	.grid-box.latest {
		width: 215px;
	}
	
	#sidebar .widget-title,
	#sidebar-home .widget-title {
		background-position: 96% center;
	}
	
	.grid-box .format-video video, 
	.grid-box .format-video object,
	.grid-box .format-video embed,
	.grid-box .format-video iframe {
		max-height: 120px;
		min-height: 120px;
	}
	
}

@media only screen and (max-width: 479px) {
	#container {
		width: 98%;
		max-width: 412px;
	}
	
	#search-box {
		width: 98%;
		max-width: 412px;
	}
	
	#search-box #searchform input[type=submit] {
		display: none;
	}	

	#grid-wrap {
		width: 412px;
	}
	
	.grid-box {
		width: 185px;
	}
	
	.grid-box.featured:first-child,
	.grid-box.latest {
		width: 185px;
	}
	
	
}

@media only screen and (max-width: 411px) {
	#container {
		width: 98%;
		max-width: 375px;
	}
	
	#search-box {
		width: 98%;
		max-width: 375px;
	}
	
	#grid-wrap {
		width: 375px;
	}
	
	.grid-box {
		width: 165px;
	}
	
	.grid-box.featured:first-child,
	.grid-box.latest {
		width: 165px;
	}
	
	
}

@media only screen and (max-width: 374px) {
	#container {
		width: 98%;
		max-width: 360px;
	}
	
	#search-box {
		width: 98%;
		max-width: 360px;
	}
	
	#search-box #s {
		width: 200px;
	}
	
	#grid-wrap {
		width: 360px;
	}
	
	.grid-box {
		width: 160px;
	}
	
	.grid-box.featured:first-child,
	.grid-box.latest {
		width: 160px;
	}
	
	
}

@media only screen and (max-width: 359px) {
	#container {
		width: 98%;
		max-width: 320px;
	}
	
	#site-title {
		font-size: 40px; /* for IE8 */
		font-size: 2.5rem;
	}
	
	#main #intro-text {
		font-size: 16px; /* for IE8 */
		font-size: 1rem;	
	}
	
	#search-box {
		width: 98%;
		max-width: 320px;
	}
		
	#grid-wrap {
		width: 320px;
	}
	
	.grid-box {
		width: 140px;
		margin: 1.8% 0;
	}
	
	.grid-box.featured:first-child,
	.grid-box.latest {
		width: 140px;
	}
	
	.grid-box .format-video video, 
	.grid-box .format-video object,
	.grid-box .format-video embed,
	.grid-box .format-video iframe {
		max-height: 140px;
		min-height: 140px;
	}
	

}