@charset "UTF-8";

body {font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; line-height: 1.6; color: #333; background-color: #f5f5f5; margin: 0; padding: 0;}

h1 {font-weight: 700; color: #444; margin-bottom: 15px;}
h2, h3, h4, h5, h6 {font-weight: 700; color: #286b6c; margin-bottom: 15px;}

h2 { clear: both;  }

p {margin-bottom: 30px;}

a {color: #286b6c; text-decoration: none;}

a:hover {color: #3c9e9f; text-decoration: underline;}

.text-lavender {color: #967bb6;}

.text-teal {color: #3c9e9f;}

.bg-lavender {background-color: #967bb6;}

.bg-teal {background-color: #3c9e9f;}

.img-flexible-half, .img-flexible-full {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; text-align: center; padding: 10px; margin: 20px;}

.img-flexible-half {width: 45%; display: block; float: right; margin: 20px 0 20px 20px;}

.img-flexible-full {width: 95%;}

.img-flexible-half img, .img-flexible-full img {width: 100%; height: auto; margin-bottom: 10px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease;}

img:hover {transform: scale(1.05);}

#mainwrapper {width: 100%; max-width: 1200px; margin: 0 auto; box-sizing: border-box;}

header {width: 100%; max-width: 1200px; margin: 0 auto; background-color: #286b6c; color: lavender; display: flex; flex-direction: column; align-items: center;}

#mainwrapper header #ad-top {width: 100%; display: flex; justify-content: center; min-height: 50px;}

#mainwrapper header .header-content {display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px 2%;}

#logo {display: flex; align-items: center;}

#logo a {color: #D8BFD8; display: flex; align-items: center; text-decoration: none;}

#logo img {margin-right: 10px; padding: 10px;}

nav {display: flex; align-items: center; width: auto;}

nav a {color: #D8BFD8; padding: 0 15px; text-decoration: none;}

#content {display: flex; justify-content: space-around; flex-wrap: nowrap; width: 100%;}

#mainContent {width: 75%; background-color: white; padding: 25px; box-sizing: border-box;}

#sidebar {width: 25%; min-width: 325px; background-color: #D8BFD8; padding: 32px 2%; text-align: center; display: flex; flex-direction: column; align-items: center; box-sizing: border-box;}

#sidebar * {width: 100%; max-width: 100%; text-align: center;}

#sidebar img {max-width: 100%; height: auto; margin: 10px 0;}

#content #mainContent h1, #content #mainContent h2 {}

#content #mainContent h3 {font-weight: 200;}

#content #mainContent #bannerImage {width: 100%; background-color: rgba(208,207,207,1.00);}

#content #mainContent p {text-align: justify;}

#content #mainContent #authorInfo {background-color: darkslategray; color: #D8BFD8; padding: 11px 2%;}

#authorInfo h2 {color: #D8BFD8;}

.floatStop { clear: both; margin: 10px 0; }
.floatRight { float: right !important; margin: 0 0 20px 20px; vertical-align: text-top; }
.floatLeft { float: left; margin: 0 10px 5px 0; vertical-align: middle; }

footer {width: 100%; max-width: 1200px; margin: 0 auto; margin-bottom: 50px; padding: 20px 2%; background-color: #D8BFD8; display: flex; flex-wrap: wrap; justify-content: space-between; box-sizing: border-box;}

footer article {width: 46%; padding: 2%; text-align: justify; font-family: 'Source Sans Pro', sans-serif; font-weight: 200; color: darkslategray;}

footer article h3 {text-align: center; font-weight: 400;}

nav ul {padding-left: 0;}

nav ul li {list-style-type: none; padding: 8px 0;}

nav ul li a {color: darkslategray; text-decoration: none;}

#footerbar {height: 18px; clear: both; background-color: darkslategray; width: 100%; max-width: 1200px; margin: 0 auto; box-sizing: border-box;}


@media screen and (max-width: 1200px) {
	#mainwrapper {width: 100%;} .img-flexible-half {width: 96%; padding: 5px; margin: 5px;} 
	#content {flex-direction: column; justify-content: flex-start;} 
	#mainContent {width: 100%; padding: 5px;} 
	#sidebar {display: none;} 
	footer article {width: 100%;} 
	#mainwrapper header #logo {width: 96%; margin-left: 2%;} 
	#mainwrapper header nav {text-align: center; width: 98%;}
}

@media print {
	h1 {font-size: 14px;} 
	h2, h3 {font-size: 12px;} 
	body {font-size: 10px; background-color: white;} 
	header, footer, #sidebar {display: none;} 
	img {display: none;} 
	#mainContent {padding: 0; width: 100%; background-color: white;}
}