/*  CSS for place holder page
    (C) Murawski Studio, 2023 */

/*
Possible breakpoints:
Mobile: 320-480px
Tablet: 481-768px
Computer: 769px+

Curently at 340px mobile

Actually, having looked at finished result, if we have one, it's probably only 
needed for LARGE screens, i.e., >1280px wide!
*/
body {
	background: 	#f8f8f8;
}

h1, h2, h3, h4, h5, h6,  p, ul, ol {
	font-family: 	Arial, sans-sefif;
	font-size: 		1em;
	color: 			black;
	margin: 		0.7em auto 0;
}

h1, h2, h3, h4 {
	margin-top: 	2em;
}

ul, ol {
	margin-top: 	0.4em;
	margin-left: 	-1em;
}

h1 {
	font-size: 		2em;
}

a {
	text-decoration: none;
	color:			 black
}

br.clear {
	clear: 			both;
}

hr.divider {
	display: 		block;
	height: 		1px;
	border: 		0;
	border-top: 	1px solid lightgrey;
	margin: 		1em 1em 0;
	padding: 		0;
}

div#page {
	width: 			100%;
	margin: 		0 auto 0;
	background: 	#ffffff;
	border-radius: 	5px;
}

div#logo {
	text-align: 	center;
	margin: 		10px auto;
	padding: 		5px;
}

div#logo p.logo-main {
	font-weight: 	bold;
	color: 			black;
	font-size: 		2.35em;
	letter-spacing: -2px;
	font-stretch: 	extra-expanded;
	text-indent: 	-3px;
	margin: 		10px auto 0;
}

div#logo p.logo-sub {
	font-weight: 	bold;
	color: 			darkgray;
	margin-top: 	0;
}

/* Working... */

div.banner {
	width: 			  100%;
	margin: 		  0 auto 2em;
	border: 		  2px solid black;
	background-color: black;
}

div.image-row {
	width: 			  100%;
	display: 		  flex;
	margin: 		  0 auto;
	background-color: black;
}

div.banner-image-box {
	border: 		  2px solid black;
	flex-grow: 		  1;
	background-color: black;
}

img.banner-image {
	max-height: 	250px;
	width: 			100%;
	object-fit: 	cover;
}

div[class*="viewport"] {
	display: 		none;
}


img.banner-image-1x1 {
	height: 		100%;
}

img.banner-image-4x3 {
	height: 		100%;
}

/* End of working... */

div#content {
	width: 			85%;
	margin: 		0 auto 0;
	min-height: 	250px;
}

div#contact {
	display: 		table;
	margin: 		1em auto 1.5em;
}

div#social-links {
	display: 		table;
	margin: 		1em auto 2em;
}

div.social-icon {
	display: 		table-cell;
	width: 			40px;
	height: 		40px;
	padding: 		0 20px;
}

/*
div#footer {
	width: 			auto;
	text-align: 	center;
	padding: 		2px;
	position: 		relative;
}
*/
div#footer div#copyright-div {
	display: 		block; 
	margin: 		1em 1.4em 0;
}

div#footer div#privacy-div {
	display: 		block; 
	margin: 		1em 1.4em 0.5em; 
	float: 			right;
}

div#footer p#copyright,
div#footer p#privacy-link {
	display: 		inline;
	font-size: 		0.8em;
	color: 			dimgray;
}

div#footer a {
	color: 			dimgray;
}

div#footer br.clear {
	line-height:	70%;
}


/* Smaller screens above - smallest size we've designed for is about 320px wide */
/* Short screens, presumably landscape phones & tablets */
@media only screen and (min-height: 650px) {
	div.viewport-v1 {
		display: 	flex;
	}

}

/* Tablet screens */
@media only screen and (min-width: 480px) {
	div#page {
		width: 		90%;
	}
	div#content {
		width: 		80%;
	}
	
	div.banner-image-box.viewport-h2 {
		display: 	block;
	}
}

/* Large screens */
@media only screen and (min-width: 1200px) {
	div#page {
			width: 	80%;
	}

	div.banner-image-box.viewport-h3 {
		display: 	block;
	}
}

/* Huge screens */
@media only screen and (min-width: 1800px) {
	div#page {
			width: 	1440px;
	}
}