/*** 
	VERY IMPORTANT screens.css NOTE ABOUT OVERRIDE ORDER
	Selector must match flexbox.css exactly
	i.e. If flexbox.css has header div#navitems, screens.css needs to have header div#navitems as JUST #navitems will not override it

	MOBILE <= 699px
	TABLET = 700px - 1024px
	TABLET & MOBILE <= 1024px
	DESKTOP >= 960px (note: Fresh Harvest was 1025)
***/

/* Mobile */
@media 
	only screen 												and (max-width: 699px), 
	only screen and (-webkit-min-device-pixel-ratio: 2)      	and (max-width: 699px),
	only screen and (   min--moz-device-pixel-ratio: 2)      	and (max-width: 699px),
	only screen and (     -o-min-device-pixel-ratio: 2/1)    	and (max-width: 699px),
	only screen and (        min-device-pixel-ratio: 2)      	and (max-width: 699px),
	only screen and (                min-resolution: 192dpi) 	and (max-width: 699px),
	only screen and (                min-resolution: 2dppx)  	and (max-width: 699px)
{
	.tooltip .tooltiptext {
		max-width: 100%;
		margin-left: -25vw;
		margin-top: 10px;
	}

}

/* Tablet & Mobile */
@media 
	only screen 												and (max-width: 959px), 
	only screen and (-webkit-min-device-pixel-ratio: 2)      	and (max-width: 959px),
	only screen and (   min--moz-device-pixel-ratio: 2)      	and (max-width: 959px),
	only screen and (     -o-min-device-pixel-ratio: 2/1)    	and (max-width: 959px),
	only screen and (        min-device-pixel-ratio: 2)      	and (max-width: 959px),
	only screen and (                min-resolution: 192dpi) 	and (max-width: 959px),
	only screen and (                min-resolution: 2dppx)  	and (max-width: 959px)
{

	html, body { overflow-x: hidden; }

	body { position: relative }
	
	header, header.sticky-top {
		position: fixed;
		width: 100%;	/* We employ this method over 'sticky' becuase of the body position: relative above to prevent horizontal scrolling */
		top: 0;
		z-index: 5000;
		height: 100px;		/* Make this match the margin-top of div#MainBody below */
	}

	div#MainBody {
		margin-top: 100px;	/* Make this match the height of header above */
	}
}


/* Tablet */
@media
	only screen 												and (min-width: 700px) and (max-width: 959px),
	only screen and (-webkit-min-device-pixel-ratio: 2)      	and (min-width: 700px) and (max-width: 959px),
	only screen and (   min--moz-device-pixel-ratio: 2)      	and (min-width: 700px) and (max-width: 959px),
	only screen and (     -o-min-device-pixel-ratio: 2/1)    	and (min-width: 700px) and (max-width: 959px),
	only screen and (        min-device-pixel-ratio: 2)      	and (min-width: 700px) and (max-width: 959px),
	only screen and (                min-resolution: 192dpi) 	and (min-width: 700px) and (max-width: 959px),
	only screen and (                min-resolution: 2dppx)  	and (min-width: 700px) and (max-width: 959px) 
{ 
	
}

/* Tablet & Desktop */
@media 
	only screen 												and (min-width: 700px), 
	only screen and (-webkit-min-device-pixel-ratio: 2)      	and (min-width: 700px),
	only screen and (   min--moz-device-pixel-ratio: 2)      	and (min-width: 700px),
	only screen and (     -o-min-device-pixel-ratio: 2/1)    	and (min-width: 700px),
	only screen and (        min-device-pixel-ratio: 2)      	and (min-width: 700px),
	only screen and (                min-resolution: 192dpi) 	and (min-width: 700px),
	only screen and (                min-resolution: 2dppx)  	and (min-width: 700px)
{
	
}

/* Desktop */
@media 
	only screen 												and (min-width: 960px), 
	only screen and (-webkit-min-device-pixel-ratio: 2)      	and (min-width: 960px),
	only screen and (   min--moz-device-pixel-ratio: 2)      	and (min-width: 960px),
	only screen and (     -o-min-device-pixel-ratio: 2/1)    	and (min-width: 960px),
	only screen and (        min-device-pixel-ratio: 2)      	and (min-width: 960px),
	only screen and (                min-resolution: 192dpi) 	and (min-width: 960px),
	only screen and (                min-resolution: 2dppx)  	and (min-width: 960px)
{
	.flex-container {
		display: flex;
		flex-wrap: wrap;
	}

	section.feature { padding: 20px; }

	section.action { padding: 20px; }

	section.hero-desktop { display: flex; }
	section.hero-mobile { display: none; }

	section.flex-50 { flex-grow: 1; max-width: 45%; }

	header div#NavItems { display: block; }
	header div#Mobile-NavItems { display: none }

	.navlink-tablet { display: none; }

	footer { font-size: .75em; }

	.initial-show { display: flex; }

	.book-thumbnail img { max-width: inherit; }

		.book-thumbnail img.book-row-1 { max-width: 250px; }
		.book-thumbnail img.book-row-2 { max-width: 200px; }
		.book-thumbnail img.book-row-3 { max-width: 150px; }

	a.buy-now-small { font-size: 1.5em; }

	.sticky-desktop {
		position: sticky;
		top: 10px;
	}

}

/* Special Nav */
@media
	only screen 												and (max-width: 959px), 
	only screen and (-webkit-min-device-pixel-ratio: 2)      	and (max-width: 959px), 
	only screen and (   min--moz-device-pixel-ratio: 2)      	and (max-width: 959px), 
	only screen and (     -o-min-device-pixel-ratio: 2/1)    	and (max-width: 959px), 
	only screen and (        min-device-pixel-ratio: 2)      	and (max-width: 959px), 
	only screen and (                min-resolution: 192dpi) 	and (max-width: 959px), 
	only screen and (                min-resolution: 2dppx)  	and (max-width: 959px)
{ 
	.navlink-desktop { display: block; }
	.navlink-tablet { display: none; }
}

/* Special Nav */
@media
	only screen 												and (min-width: 960px) and (max-width: 1134px),
	only screen and (-webkit-min-device-pixel-ratio: 2)      	and (min-width: 960px) and (max-width: 1134px),
	only screen and (   min--moz-device-pixel-ratio: 2)      	and (min-width: 960px) and (max-width: 1134px),
	only screen and (     -o-min-device-pixel-ratio: 2/1)    	and (min-width: 960px) and (max-width: 1134px),
	only screen and (        min-device-pixel-ratio: 2)      	and (min-width: 960px) and (max-width: 1134px),
	only screen and (                min-resolution: 192dpi) 	and (min-width: 960px) and (max-width: 1134px),
	only screen and (                min-resolution: 2dppx)  	and (min-width: 960px) and (max-width: 1134px)
{ 
	.navlink-desktop { display: none; }
	.navlink-tablet { display: block; }
}

/* Special Nav */
@media
	only screen 												and (min-width: 1135px), 
	only screen and (-webkit-min-device-pixel-ratio: 2)      	and (min-width: 1135px), 
	only screen and (   min--moz-device-pixel-ratio: 2)      	and (min-width: 1135px), 
	only screen and (     -o-min-device-pixel-ratio: 2/1)    	and (min-width: 1135px), 
	only screen and (        min-device-pixel-ratio: 2)      	and (min-width: 1135px), 
	only screen and (                min-resolution: 192dpi) 	and (min-width: 1135px), 
	only screen and (                min-resolution: 2dppx)  	and (min-width: 1135px)
{ 
	.navlink-desktop { display: block; }
	.navlink-tablet { display: none; }
}