@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800');

:root {
	--text-color: #3d5054;
	--theme-color1: black;
	--theme-color2: var(--theme-color1);
	--canvas-color: white;
	--heading-link-color: #111;
	--strong-color: #1c1c1c;
	--blockquote-color: #666666;
	--blockquote-bg: #e6e6e6;
	--blockquote-border: #dcdcdc;
	--surface-color: #f1f3f4;
	--surface-strong: white;
	--hero-text-color: white;
	--image-overlay-color: var(--theme-color2);
	--hero-overlay-color: var(--theme-color2);
	--image-overlay-opacity: 0.5;
	--hero-overlay-opacity: 0.5;
	--border-color: #d7dbdc;
	--subtle-border-color: #e4e4e4;
	--panel-border-color: #eaedee;
	--panel-shadow-color: #f9fafa;
	--inset-highlight-color: white;
	--muted-link-hover: #708589;
	--nav-hover-color: #000;
	--active-nav-bg: rgba(0, 0, 0, 0.1);
	--image-shadow-color: rgba(0, 0, 0, 0.9);
	--toggle-bg: rgba(255, 255, 255, 0.92);
	--toggle-border: rgba(61, 80, 84, 0.18);
	--toggle-icon-color: var(--text-color);
	--toggle-shadow: 0 18px 38px rgba(0, 0, 0, 0.16);
	--transition-duration: var(--transition-duration);
}

body.dark {
	--text-color: #e7ddcf;
	--canvas-color: #120f0d;
	--heading-link-color: #fff0e1;
	--strong-color: #fff4e8;
	--blockquote-color: #e5cfba;
	--blockquote-bg: #241b16;
	--blockquote-border: #4f3a2f;
	--surface-color: #1c1613;
	--surface-strong: #241c18;
	--hero-text-color: #fff4e8;
	--image-overlay-color: #000;
	--hero-overlay-color: #000;
	--image-overlay-opacity: 0.7;
	--hero-overlay-opacity: 0.68;
	--border-color: #43342b;
	--subtle-border-color: #43342b;
	--panel-border-color: #4f3a2f;
	--panel-shadow-color: rgba(255, 255, 255, 0.05);
	--inset-highlight-color: rgba(255, 255, 255, 0.08);
	--muted-link-hover: #e5be95;
	--nav-hover-color: #fff4e8;
	--active-nav-bg: rgba(255, 255, 255, 0.08);
	--image-shadow-color: rgba(0, 0, 0, 0.78);
	--toggle-bg: rgba(18, 15, 13, 0.92);
	--toggle-border: rgba(255, 240, 225, 0.16);
	--toggle-icon-color: #fff4e8;
	--toggle-shadow: 0 20px 42px rgba(0, 0, 0, 0.45);
}

/*
Theme Name: Harmony
Theme URI: http://www.elegantthemes.com/gallery/
Version: 2.4.12
Description: 2 Column theme from Elegant Themes
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
*/

/*------------------------------------------------*/
/*-----------------[BASIC STYLES]-----------------*/
/*------------------------------------------------*/

body {
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 16px;
	color: var(--text-color);
	background-color: var(--canvas-color);
	transition: background-color var(--transition-duration) ease, color var(--transition-duration) ease;
}

a {
	text-decoration: none;
	color: var(--theme-color1);
}

a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6, #title, .slogan {
	padding: 5px 0;
	color: var(--text-color);
	line-height: 1em;
	font-weight: normal;
}

h1, h2, h3, #title, .slogan { letter-spacing: -2px; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: var(--heading-link-color); }

h1, #title { font-size: 30px; }

h2, .slogan { font-size: 24px; }

h3 { font-size: 22px; }

h4 { font-size: 18px; }

h5 { font-size: 16px; }

h6 { font-size: 14px; }

p { line-height: 24px; }

strong {
	font-weight: bold;
	color: var(--strong-color);
}

blockquote {
	margin: 1.5em;
	padding: 1em;
	color: var(--blockquote-color);
	background: var(--blockquote-bg);
	font-style: italic;
	border: thin solid var(--blockquote-border);
}

blockquote p { padding-bottom: 0px; }

#site-identity {
	display: block;
	position: relative;
}

#logo img, #title img { max-height: 200px; }

/*------------------------------------------------*/
/*---------------[MAIN LAYOUT INFO]---------------*/
/*------------------------------------------------*/

#main-header {
	text-align: left;
	padding: 10px 20px;
	background-position: center;
}

.container {
	text-align: left;
	padding: 0 20px;
	margin: 0 auto;
	max-width: 1100px;
	position: relative;
}

#main-container {
	text-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
	text-transform: uppercase;
	margin: 0 20px;
	padding: 20px;
	text-align: center;
	max-width: 500px;
	position: relative;
}

#title {
	font-size: 72px;
	font-weight: 800;
	color: var(--hero-text-color);
}

#main-header .slogan {
	font-size: 30px;
	font-weight: 300;
	color: var(--hero-text-color);
}

#main-nav {
	background-color: var(--surface-color);
	border-bottom: thin solid var(--border-color);
}

nav li { display: inline-block; }

nav a {
	font-size: 18px;
	color: var(--text-color);
	text-decoration: none;
	text-shadow: 1px 1px 0 var(--inset-highlight-color);
	padding: 30px 15px 35px;
	display: block;
	font-weight: 300;
	transition: color var(--transition-duration) ease, background-color var(--transition-duration) ease;
}

nav > ul > li:first-child > a { padding-left: 0; }

nav a:hover { color: var(--nav-hover-color); }

nav a.current, li.current > a { font-weight: 800; }

#login { background-color: var(--surface-color); }

.has-sidebar .page {
	padding-right: 30px;
	vertical-align: top;
	display: table-cell;
	width: 763px;
	max-width: 100%;
}

.has-sidebar .page-container { display: table; }

/*--------------------------------*/
/*-----HOME PAGE HEADER STYLE-----*/
/*--------------------------------*/

#main-header {
	padding: 100px 0;
	display: flex;
    justify-content: center;
}

.slogan { text-align: center; }

/*------------------------------------------------*/
/*---------------------[FOOTER]-------------------*/
/*------------------------------------------------*/

#footer-bottom {
	border-top: thin solid var(--subtle-border-color);
	padding: 55px 0 40px;
}

#footer-bottom .container { display: flex; }

#all_socialmedia { flex: 1; }

#all_socialmedia + #copyright {
	text-align: right;
	margin-left: 20px;
	flex: 1;
}

#copyright a {
	color: var(--text-color);
	font-weight: 800;
}

/*-----------------------------------------------------------*/
/*---------------------[CLOUDCARPENTER CSS]-------------------*/
/*-----------------------------------------------------------*/

#main-container::before, .featured:nth-of-type(odd)::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: var(--image-overlay-color);
	opacity: var(--image-overlay-opacity);
	transition: background-color var(--transition-duration) ease, opacity var(--transition-duration) ease;
}

#main-header::before {
	background-color: var(--hero-overlay-color);
	transition: background-color var(--transition-duration) ease, opacity var(--transition-duration) ease;
}

body.dark #main-header::before {
	background-color: var(--hero-overlay-color) !important;
	opacity: var(--hero-overlay-opacity);
}

#main-header #logo + #title-and-slogan { margin-left: 0; }

.featured:nth-of-type(odd) {
	position: relative;
	color: white;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
	background-attachment: fixed;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}

.featured:nth-of-type(odd) :is(h1, h2, h3, strong) { color: var(--hero-text-color); }

.featured:nth-of-type(odd) figure :is(h1, h2, h3) { color: var(--text-color); }

.featured:nth-of-type(odd) blockquote { text-shadow: none; }

#featured1 { background-image: url(featured1-bg.jpg); }

#featured3 { background-image: url(featured3-bg.jpg); }

.account-sidebar .copy {
	padding-left: 10px;
	padding-right: 10px;
}

.copy img, .copy iframe, .copy .slideshow {
	border: 5px solid var(--surface-strong);
	box-shadow: 0px 0px 1px var(--image-shadow-color);
}

.copy figure {
	background-color: var(--surface-strong);
	padding: 5px;
	box-shadow: 0px 0px 1px var(--image-shadow-color);
	border: none;
}

#menu_icon {
	display: none;
	padding: 35px 15px 35px;
}

.page h1 {
	font-size: 36px;
	font-weight: 800;
	padding-bottom: 13px;
}

.has-sidebar #rightside {
	vertical-align: top;
	width: 297px;
	display: table-cell;
	border-left: thin solid var(--subtle-border-color);
}

.sidebar { margin-bottom: 1em; }

.sidebar h1 {
	text-shadow: 1px 1px 0 var(--inset-highlight-color);
	font-size: 16px;
	letter-spacing: 0;
	font-weight: 800;
	width: 100%;
	padding: 22px 26px;
	border: thin solid var(--panel-border-color);
	margin-bottom: 10px;
	background-color: var(--surface-color);
	box-shadow: 1px 1px 0 var(--panel-shadow-color) inset;
}

.sidebar a { color: var(--text-color); }

.sidebar a:hover {
	color: var(--muted-link-hover);
	text-decoration: none;
}

.sidebar ul { margin-top: 20px; }

.sidebar li:hover {
	background-image: url(hover-widget-bullet.png);
	color: var(--muted-link-hover);
}

.sidebar li {
	padding: 0 0 16px 17px;
	background: url(widget-bullet.png) no-repeat 0 7px;
	color: var(--text-color);
	list-style: none !important;
}

#title { color: white; }

#title:hover { text-decoration: none; }

#main-nav { margin-bottom: 50px; }

#main-header {
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(header-bg.jpg);
}

.is_frontpage #main-header { padding: 200px 0; }

nav a:hover { text-decoration: none; }

nav ul ul {
	display: none;
	position: absolute;
	background-color: var(--surface-color);
	z-index: 999;
	width: 220px;
}

nav > ul > li > ul {
	border-left: thin solid var(--border-color);
	border-right: thin solid var(--border-color);
	border-top: thin solid var(--surface-color);
	border-bottom: thin solid var(--border-color);
}

nav > ul > li > ul > li > ul {
	border-left: none;
	border-right: thin solid var(--border-color);
	border-top: thin solid var(--border-color);
	border-bottom: thin solid var(--border-color);
}

nav ul ul li { width: 100%; }

nav ul ul a {
	display: block;
	width: 100%;
	padding: 15px;
}

nav ul li:hover > ul { display: block; }

nav ul ul ul {
	top: -1px;
	left: 219px;
}

nav > ul > li, nav ul ul li { position: relative; }

ul { list-style-type: disc !important; }

nav li > a::after {
	content: '\F013E'; /* chevron-double-right */
	font-family: 'Material Design Icons';
}

nav li > a:only-child::after { content: ''; }

#mobile_menu {
	padding-left: 0;
	font-weight: 800;
	font-size: 18px;
	color: var(--text-color);
	text-decoration: none;
	text-shadow: 1px 1px 0 var(--inset-highlight-color);
}

/*-----------------------------------------------------------*/
/*---------------------[THEME SWITCHER]-------------------*/
/*-----------------------------------------------------------*/

.theme-toggle {
	position: fixed;
	top: 100px;
	right: 0;
	z-index: 1000;
	font-size: 22px;
	line-height: normal;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 39.5px;
	height: 42.5px;
	background-color: var(--toggle-bg);
	color: var(--toggle-icon-color);
	border: 1px solid var(--toggle-border);
	border-right: none;
	border-radius: 50px 0 0 50px;
	padding: 5px 5px 5px 7px;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(14px);
	cursor: pointer;
	transition: box-shadow 0.2s ease, background-color var(--transition-duration) ease, color var(--transition-duration) ease, border-color var(--transition-duration) ease, filter 0.2s ease;
}

.theme-toggle:hover {
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.18);
	filter: brightness(1.08);
}

.theme-toggle:focus-visible {
	outline: 2px solid var(--theme-color1);
	outline-offset: 3px;
}

.theme-toggle__icons {
	position: relative;
	width: 1em;
	height: 1em;
	display: block;
	padding: 0;
	font-size: 1em;
	line-height: 1;
}

.theme-toggle__icon {
	position: absolute;
	inset: 0;
	transition: opacity var(--transition-duration) ease, transform var(--transition-duration) ease;
}

.theme-toggle__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Light mode icon state */
body:not(.dark) .theme-toggle__icon--sun {
	opacity: 0;
	transform: translateY(-1px) rotate(35deg) scale(0.63);
}

body:not(.dark) .theme-toggle__icon--moon {
	opacity: 1;
	transform: translate(1px, -1px) rotate(0deg) scale(1);
}

/* Dark mode icon state */
body.dark .theme-toggle__icon--sun {
	opacity: 1;
	transform: translateY(-1px) rotate(0deg) scale(0.9);
}

body.dark .theme-toggle__icon--moon {
	opacity: 0;
	transform: translate(1px, -1px) rotate(-35deg) scale(0.7);
}

.featured { padding: 100px 0; }

#account_menu {
	float: right;
	padding: 7px 0;
}

.marquee {
	float: left;
	padding: 10px 0;
}

.page-container { margin-bottom: 50px; }

.sidebar h2, .sidebar h3, .sidebar h4, .sidebar h5, .sidebar h6, .sidebar p {
	padding-left: 10px;
	padding-right: 10px;
}

.clearfix::before, .clearfix::after {
	content: '';
	display: table;
}

.clearfix::after { clear: both; }

.cards .brick { max-width: 340px; }

@media screen and (max-width: 767px) {
	nav a.current, li.current > a { background-color: var(--active-nav-bg); }

	.has-sidebar .page-container { display: block; }

	.has-sidebar .page { margin-bottom: 50px; }

	#menu_icon.active i::before { content: "\F0156"; /* close */ }

	.has-sidebar .page, .has-sidebar .sidebar {
		display: block;
		width: 100%;
		padding: 0;
		clear: both;
	}
	.marquee {
		width: 100%;
		float: none;
		text-align: center;
	}

	#account_menu {
		width: 100%;
		float: none;
		text-align: center;
	}

	#mobile_menu {
		display: inline-block;
		vertical-align: middle;
		position: relative;
		border-right: thin solid var(--border-color);
		box-shadow: 1px 0 0 var(--inset-highlight-color);
		font-size: 2em;
	}

	#mobile_menu span {
		display: block;
		cursor: pointer;
	}

	.nav-container { text-align: center; }

	nav {
		display: none;
		position: absolute;
		background-color: var(--surface-color);
		z-index: 999999999;
		border-bottom: thin solid var(--border-color);
		border-left: thin solid var(--border-color);
		border-right: thin solid var(--border-color);
		margin-left: -20px;
		right: -1px;
	}

	nav ul ul ul a { padding: 10px 45px; }

	nav ul ul {
		position: static;
		display: block;
	}
	nav a {
		padding: 10px;
		text-align: left;
	}

	nav > ul > li { display: block; }

	nav > ul > li > ul > li > ul, nav > ul > li > ul { border: none !important; }

	nav ul ul a { padding: 10px 30px; }

	nav > ul > li:first-child > a { padding-left: 10px; }

	.theme-toggle {
		top: 90px;
	}

}

@media screen and (max-width: 500px) {
	#title { font-size: 50px; }

	nav { right: auto; }

	.nav-container { text-align: center; }

	#mobile_menu {
		border-right: none;
		box-shadow: none;
	}

	.theme-toggle {
		top: 84px;
	}

	#footer-bottom .container { display: block; }

	#all_socialmedia + #copyright {
		text-align: left;
		margin-left: 0;
		margin-top: 20px;
	}
}

/* workaround for iOS Safari position:fixed + background-size:cover bug (https://stackoverflow.com/questions/24154666) */
@supports (-webkit-touch-callout: none) {
	#main-header, .featured:nth-of-type(odd) { background-attachment: scroll; }
}

body.dark .featured:nth-of-type(odd) table,
body.dark .featured:nth-of-type(odd) figure {
	background-color: var(--canvas-color) !important;
	color: var(--text-color);
}

body.dark .featured:nth-of-type(odd) table :is(thead, tbody, tr, th, td) {
	background-color: transparent !important;
	border-color: var(--border-color) !important;
	color: var(--text-color);
}

body.dark .featured:nth-of-type(odd) table :is(h1, h2, h3, strong),
body.dark .featured:nth-of-type(odd) figure :is(h1, h2, h3, strong) {
	color: var(--text-color);
}

body.dark .cards .brick {
	background-color: var(--surface-strong);
}

body.dark .cards {
	background-color: var(--surface-color);
}

body.dark :is(
	input:not([type='submit']):not([type='button']):not([type='reset']):not([type='checkbox']):not([type='radio']):not([type='file']),
	textarea,
	select
) {
	background-color: rgba(255, 244, 232, 0.08);
	color: var(--hero-text-color);
	border: 1px solid rgba(255, 244, 232, 0.24);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	transition: background-color var(--transition-duration) ease, color var(--transition-duration) ease, border-color var(--transition-duration) ease, box-shadow var(--transition-duration) ease;
}

body.dark :is(
	input:not([type='submit']):not([type='button']):not([type='reset']):not([type='checkbox']):not([type='radio']):not([type='file']),
	textarea
)::placeholder {
	color: rgba(255, 244, 232, 0.58);
}

body.dark :is(
	input:not([type='submit']):not([type='button']):not([type='reset']):not([type='checkbox']):not([type='radio']):not([type='file']),
	textarea,
	select
):focus {
	background-color: rgba(255, 244, 232, 0.12);
	border-color: rgba(255, 244, 232, 0.42);
	box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.22);
	outline: none;
}

body.dark select option {
	background-color: var(--surface-strong);
	color: var(--hero-text-color);
}