/* This is the CSS stylesheet for the Vintagephoto.com index.html file linked in HTML head section */
/* Reference info - fvsch.com/base-stylesheet */
/* add a temporary border to identify/locate most css classes on your webpage - border: 1px solid Blue; */

/* CSS for mobile screens first */

html, body {
	height: 100%;
	min-height: 100vh;
	font-size: 100%;
}

body {
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4 {
	font-weight: bold;
}

h1 {
	font-size: 2.25rem;
	line-height: 2.5rem;
}

h2 {
	font-size: 1.75rem;
	line-height: 2rem;
	color: DimGray;
}

h3 {
	font-size: 1.25rem;
	line-height: 1.5rem;
}

h4 {
	font-size: 1.25rem;
	line-height: 1.5rem;
	text-transform: uppercase;
}

p {
	margin: 1.5rem 0;
	padding: 0;
}

a, img {
	border: none;
	text-decoration: none;
	margin: 0;
	padding: 0;
}

.site-wrap {
	width: 90%;
	margin: 0 auto;
	color: Black;
	font-size: 1em;
}

header {
	min-height: 2rem;
	padding: .5rem;
	/* background-color: WhiteSmoke; */
}

.site-search, .gcse-search {
	display: none;
	margin: 0;
	padding: .5rem 1.5rem;
	color: Blue;
	background-color: White;
	border: solid 1px Silver;
	float: right;
}

.site-search:after .gcse-search:after {
	clear: both;
}

.main {
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
}

.hero-section {
	display: table;
	width: 100%;
	text-align: center;
	clear: both;
}

.hero-image {
	width: 100%;
	/* max-width: 375px; */
	height: auto;
	margin-right: 0;
	margin-bottom: 1rem;
	text-align: center;
	float: none;
	clear: right;
}

.hero-text, .hero-text p {
	text-align: center;
}

.site-title {
/* border: 1px solid Blue; */
}

.site-description {
/* border: 1px solid Blue; */
}

.site-phone {
/* border: 1px solid Blue; */
}

.site-email {
/* border: 1px solid Blue; */
}

.site-guestbook {
	display: none;
	/* display: inline-block; */
	margin: 1.5rem 0;
	padding: .5rem 1.5rem;
	text-align: center;
	border: solid 1px Silver;
}

.site-guestbook a {
/* color: Blue; */
}

navbar {
/* border: 1px solid Blue; */
}

ul {
	list-style: none;
	text-align: center;
	margin: 2.5rem 0;
	padding: 0;
}

li {
	display: block;
	margin: .25rem;	
	padding: .5rem;
	border: 1px solid Silver;
}

.clearfix {
	width: 100%;	
	clear: both;	
}

.content-section {
	margin: 4rem 0 6rem 0;
	padding: 0;
}

.content-section-title {
	width: 100%;
	text-align: center;
}

.content-section-text {
	width: 100%;
	text-align: left;
}

footer {
	width: 100%;
	min-height: 10vh;
	margin: 0;
	padding: 0;
}

.footer-copyright, .footer-text {
	text-align: center;
}

/* CSS for larger screens */

@media screen and (min-width: 48em) { /* Approximately 768px */

.hero-image {
	width: 50%;
	max-width: 375px;
	margin-right: 1rem;
	margin-bottom: 1rem;
	text-align: center;
	float: left;
	clear: right;
}

li {
	display: inline-block;
	margin: .25rem;	
	padding: 1.5rem;
	border: 1px solid Silver;
}

}