/*
	Theme Name: Ampersand
	Author: Rachel Sheffield
	Version: 1.0
*/

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

/* -------------------- 
 * RESET ALL STYLES 
 * --------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {background: transparent; border: 0; box-sizing: border-box; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline;}
body {line-height: 1;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
nav ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
a {background: transparent; font-size: 100%; margin: 0; padding: 0; vertical-align: baseline;}
ins {background-color:#ff9; color:#000; text-decoration:none;}
mark {background-color: #ff9; color: #000; font-style: italic; font-weight: bold;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom: 1px dotted; cursor: help;}
table {border-collapse: collapse; border-spacing: 0;}
hr {border: 0; border-top: 1px solid #cccccc; box-sizing: border-box; display: block; height: 1px; margin: 1em 0; padding: 0;}
input, select {vertical-align: middle;}



/* --------------------
 * FORMATTING STYLES 
 * --------------------*/
.container {margin: 0 auto; max-width: 1200px;}
#main-content .container > .vc_row {margin: 0; padding: 35px 0;}
#main-content .container > .vc_row.vc_row-no-padding {padding: 0;}
#main-content .container > .vc_row.vc_row-has-fill {left: 0;}
#main-content .wpb_content_element {margin-bottom: 0;}
#main-content .vc_row-has-fill>.vc_column_container>.vc_column-inner {padding-top: 0;}

/* Fonts */
body, input, textarea {font-family: 'Open Sans', Arial, sans-serif; font-size: 15px;}
body p, body ul, body ol {line-height: 1.5em;}

h1, h2, h3, h4 {margin-bottom: 10px;}
h1 {font-size: 36px;}
h2 {font-size: 28px;}
h3 {font-size: 20px;}

#page-title {margin-bottom: 0; padding-top: 30px;}

p {margin-bottom: 15px;}

ul, ol {margin-left: 20px;}

/* Form Fields + Buttons */
input, textarea, select {border: 1px solid #ccc; padding: 10px 15px;}
input[type="submit"] {color: #fff; text-transform: uppercase;}





/* --------------------
 * HEADER + NAV STYLES 
 * --------------------*/
/* Topbar */
.topbar {display: none;}
.topbar-show {color: rgba(255, 255, 255, 0.6); display: block; font-size: 13px; min-height: 30px;}
.topbar-show .topbar-part {display: inline-block; padding: 10px 0; width: 49.8%;}
#topbar-right {text-align: right;}
#topbar-right .fab, footer .fab {background-color: rgba(255, 255, 255, 0.6); border-radius: 50px; box-sizing: border-box; margin-left: 5px; padding: 5px; text-align: center; text-decoration: none; transition: 0.1s ease-in all; width: 23px;}
#topbar-right .fab:hover, footer .fab:hover {background-color: #fff;}

/* Sticky Nav */
header.sticky-nav {position: fixed; width: 100%; z-index: 20;}
header.sticky-nav #sticky-logo {display: none;}
.page-scrolled header.sticky-nav #logo {display: none;}
.page-scrolled header.sticky-nav #sticky-logo {display: inline-block;}

/* Tagline */
.tagline {display: none;}
.tagline-show {display: inline-block; font-size: 14px; vertical-align: middle;}

/* Basic (Left Logo) Header */
header {min-height: 50px;}

#logo {display: inline-block; font-size: 22px; padding: 20px 0; vertical-align: middle; width: 29%;}

nav {display: inline-block; text-align: right; vertical-align: middle; width: 70%;}
nav ul li {display: inline-block; position: relative;}
nav ul li a, #menu-main-menu-1 li a {color: #000; font-weight: bold; padding: 10px; text-decoration: none; text-transform: uppercase; transition: 0.1s ease-in all;}
nav .menu-main-menu-container {display: inline-block;}
nav .fab {box-sizing: border-box; margin-left: 5px; padding: 5px; text-align: center; text-decoration: none;}

/* Center Logo Header */
#nav-container.center-nav {text-align: center;}

.center-nav #logo {max-width: 200px; width: 100%;}
.center-nav #logo img {width: 100%;}

#left-site-navigation, #right-site-navigation {text-align: unset; width: auto;}
#left-site-navigation #menu-left-menu, #right-site-navigation #menu-right-menu {margin: 0;}

#mobile-navigation {display: none;}

/* Top Logo Header */
#logo.top-logo, #site-navigation.top-nav {width: 100%;}

#logo-bg {background-color: #fff; text-align: center;}
#logo-bg #logo, #logo-bg .tagline-show {display: block;}
#logo-bg .tagline-show {margin-top: 5px;}

#site-navigation.top-nav {padding: 10px 0; text-align: center;}
#site-navigation.top-nav #menu-main-menu {margin: 0;}

/* Responsive Menu */
nav button.menu-toggle, #menu-main-menu-1, .center-nav #menu-main-menu {display: none;}
nav button.menu-toggle, #mobile-navigation button.menu-toggle {background-color: transparent; border: none; display: none; font-size: 22px;}
		
/* Center Logo Menu */
#left-site-navigation, #right-site-navigation {display: none;}
.center-nav #logo {max-width: unset; text-align: left; width: 88%;}
#mobile-navigation {display: inline-block; vertical-align: middle;}

/* Dropdown Menu */
#menu-main-menu-1 {display: none; margin: 0; text-align: center;}
#menu-main-menu-1 li {border-bottom: 1px solid #fff; list-style-type: none; padding: 8px 0;}
#menu-main-menu-1 li:last-of-type {border-bottom: none;}
#menu-main-menu-1 li a {color: #fff;}

ul.sub-menu {display: none; position: absolute; text-align: left; background-color: #FFF; border: 1px solid #EEE; margin: 24px 0 0 -20px; width: max-content; right: 0;}
li.menu-item:hover ul.sub-menu {display: inline-block;}
ul.sub-menu li {display: block; padding: 16px 10px; margin: 0 !important;}

/* Slide-in Menu */ 
#popout {background-color: rgba(25, 25, 25, .9); display: none; height: 100%; left: 0px; overflow: auto; position: fixed; top: 0px; width: 250px; z-index: 100;}
#popout #menu-main-menu-1 {display: block;}
#popout #menu-main-menu-1 li {background-color: transparent; border-bottom: 1px solid #444; box-sizing: border-box; padding: 20px; width: 100%;}
#popout #menu-main-menu-1 li a {color: #fff;}
#popout-background {position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,.7); display: none; z-index: 90; cursor: pointer;}





/* --------------------
 * MAIN CONTENT STYLES 
 * --------------------*/
#main-content {background-color: #fff;}





/* --------------------
 * BLOG/NEWS STYLES 
 * --------------------*/
.post {border-bottom: 1px solid #ebebeb; margin-bottom: 25px; padding-bottom: 25px; padding-right: 40px;}
.post .post-title a, .post .post-meta a {text-decoration: none;}
.post .post-image {margin: 15px 0; max-height: 400px; overflow: hidden;}
.post .post-image img {height: auto; margin-top: -50px; width: 100%;}
.post .more-link {color: #fff; display: inline-block; margin-top: 15px; padding: 10px 15px; text-decoration: none; text-transform: uppercase;}

.post.post-small .post-image, .post.post-small .post-info {display: inline-block; vertical-align: top; width: 48%;}
.post.post-small .post-image {margin-right: 20px; margin-top: 0;}
.post.post-small .post-title {font-size: 20px;}
.post.post-small .post-meta {margin-bottom: 15px;}

.post.post-grid {border-bottom: none; display: inline-block; vertical-align: top; width: 33%;}
.post.post-grid .post-title {font-size: 18px;}

.screen-reader-text {display: none;}
#post-sidebar .vc_column-inner {background-color: #ebebeb; padding: 15px;}
#post-sidebar h4 {text-transform: uppercase;}
#post-sidebar select {margin-bottom: 20px; width: 100%;}

.left-sidebar {display: flex; flex-direction: row-reverse;}
.left-sidebar .post {padding-left: 40px; padding-right: 0;}

.single-post .post {border-bottom: none;}

/* Comments */
.comments .comment {list-style-type: none;}
.comments .comment .single-comment {background-color: #ebebeb; margin-bottom: 10px; padding: 10px;}
.comment-avatar, .comment-content {display: inline-block; vertical-align: top;}
.comment-avatar {margin-right: 10px;}
.comment-content {width: calc(100% - 110px);}
.comment-content .comment-meta {font-size: 0.85em; margin-bottom: 10px;}
.comment-content .comment-meta .comment-author {font-weight: bold;}
.comment-content .comment-text {margin-bottom: 10px;}
.comment-content .comment-reply-link {font-size: 0.85em; font-weight: bold; text-decoration: none; text-transform: uppercase;}

.comments, #respond {margin-top: 40px;}
#commentform .logged-in-as a, #reply-title a {text-decoration: none;}
#commentform .comment-form-comment label {display: none;}
#commentform .comment-form-comment #comment {width: 100%;}





/* --------------------
 * FOOTER STYLES 
 * --------------------*/
footer {color: #fff; padding: 20px;}
footer a {color: #23265a; text-decoration: none;}
footer h4, footer p, footer li {color: #fff;}

footer #s {width: 185px;}

footer #footer-copyright {border-top: 1px solid rgba(255, 255, 255, 0.3); margin-top: 20px; padding-top: 15px;}
footer .vc_row {margin: 0 auto; width: 100%;}
footer #footer-social {text-align: right;}


/* --------------------
 * RESPONSIVE STYLES 
 * --------------------*/
@media screen and (max-width: 1230px) {
	.topbar-show .topbar-part {padding: 10px 15px;}
	#logo {padding-left: 15px;}
}

@media screen and (max-width: 820px) {
	.topbar-show .topbar-part {width: 49.7%;}
}

@media screen and (max-width: 660px) {
	.topbar-show .topbar-part {width: 100%;}
	.topbar-show #topbar-left, .topbar-show #topbar-right {text-align: center;}
	.topbar-show #topbar-right {padding-top: 0;}
}

@media screen and (max-width: 600px) {
	#logo {width: 88%;}
	nav {width: 10%;}
	nav button.menu-toggle, #mobile-navigation button.menu-toggle {display: inline-block;}
	button + .menu-main-menu-container #menu-main-menu {display: none;}
	nav .fab {display: none;}
		
	/* Center Logo Menu */
	#left-site-navigation, #right-site-navigation {display: none;}
	.center-nav #logo {max-width: unset; text-align: left; width: 88%;}
	#mobile-navigation {display: inline-block; vertical-align: middle;}
		
	/* Dropdown Menu */
	#menu-main-menu-1 {display: none; margin: 0; text-align: center;}
	#menu-main-menu-1 li {border-bottom: 1px solid #fff; list-style-type: none; padding: 8px 0;}
	#menu-main-menu-1 li:last-of-type {border-bottom: none;}
	#menu-main-menu-1 li a {color: #fff;}
}