/*
	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;}
#page-title {margin-bottom: 0; padding-top: 30px;}
#main-content .container .wpb-content-wrapper > .vc_row {margin: 0; padding: 35px 0;}
#main-content .container .wpb-content-wrapper > .vc_row.vc_row-no-padding {padding: 0;}
#main-content .container .wpb-content-wrapper .vc_row-has-fill > .vc_column_container > .vc_column-inner {padding: 0;}
#main-content .wpb_content_element {margin-bottom: 20px;}
#main-content .wpb_wrapper div:last-of-type {margin-bottom: 0;}

/* Typography */
body, input, textarea {font-family: 'Open Sans', Arial, sans-serif; font-size: 15px;}
body div, body p, body ul li, body ol li, body span, body a, body strong, body em {font-size: 14px; line-height: 1.5em;}
h1, h2, h3, h4, h5, h6 {line-height: 1.3em; margin-bottom: 10px;}
h1 {font-size: 36px;}
h2 {font-size: 28px;}
h3 {font-size: 20px;}
h4 {font-size: 18px;}
h5 {font-size: 16px;}
h6 {font-size: 14px;}
p {margin-bottom: 15px;}
ul, ol {margin-left: 20px;}
strong {font-weight: bold;}
em {font-style: italic;}

/* Inputs + 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 .container {align-items: center; display: flex;}
.topbar-show .container .topbar-part {padding: 10px 0; width: 50%;}
.topbar-show .container #topbar-right {text-align: right;}
.topbar-show .container #topbar-right .fa-brands, footer .fa-brands {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-show .container #topbar-right .fa-brands:hover, footer .fa-brands:hover {background-color: #fff;}

/* Header */
header #nav-container #logo {font-size: 22px; padding: 20px 0; width: 30%;}
header #nav-container #logo a {text-decoration: none;}
header #nav-container #logo a img {max-width: 200px; width: 100%;}
header #nav-container #menu-toggle, header #nav-container #dropdown, header #nav-container #popout {display: none;}
header #nav-container #menu-toggle {background-color: transparent; border: none;}
header #nav-container #menu-toggle .fa-bars:before {font-size: 20px;}

/* Sticky Nav */
header #nav-container #sticky-logo {display: none; padding: 20px 0; width: 30%;}
header #nav-container #sticky-logo a {text-decoration: none;}
header #nav-container #sticky-logo a img {max-width: 200px; width: 100%;}
header.sticky-nav {position: fixed; width: 100%; z-index: 20;}
.page-scrolled header.sticky-nav #nav-container #logo {display: none;}
.page-scrolled header.sticky-nav #nav-container #sticky-logo {display: inline-block;}

/* Sub-menu */
header #nav-container .nav-menu li {position: relative;}
header #nav-container .nav-menu li .sub-menu {border: 1px solid #fff; display: none; margin: 0; position: absolute; text-align: left; top: 20px; width: 200px;}
header #nav-container .nav-menu li:hover .sub-menu {display: block;}
header #nav-container .nav-menu li .sub-menu li {width: 100%;}
header #nav-container .nav-menu li .sub-menu li a {display: block; padding: 10px;}

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

/* Header - Default (Left Logo) */
header {min-height: 50px;}
header #nav-container {align-items: center; display: flex;}
header #nav-container nav {text-align: right; width: 70%;}
header #nav-container nav ul li {display: inline-block; position: relative;}
header #nav-container nav ul li a, header #nav-container .menu-main-menu-container ul li a {color: #000; font-weight: bold; padding: 10px; text-decoration: none; text-transform: uppercase; transition: 0.1s ease-in all;}
header #nav-container .menu-main-menu-container {display: inline-block;}
header #nav-container nav .fa-brands {box-sizing: border-box; margin-left: 5px; padding: 5px; text-align: center; text-decoration: none;}

/* Header - Center Logo */ 
header #nav-container.center-nav {display: block;}
header #nav-container.center-nav #site-navigation {align-items: center; display: flex; justify-content: center;}
header #nav-container.center-nav #site-navigation #logo {max-width: 200px; width: 100%;}
header #nav-container.center-nav #site-navigation #left-site-navigation, #nav-container.center-nav #site-navigation #right-site-navigation {width: calc(100% - 100px);}
header #nav-container.center-nav #site-navigation #left-site-navigation {text-align: right;}
header #nav-container.center-nav #site-navigation #right-site-navigation {text-align: left;}
header #nav-container.center-nav #site-navigation #left-site-navigation .left-nav-menu {margin-right: 20px;}
header #nav-container.center-nav #site-navigation #right-site-navigation .right-nav-menu {margin-left: 20px;}

/* Header - Top Logo */
header #logo-bg {background-color: #fff; text-align: center;}
header #logo-bg #logo-container .top-logo {display: block; padding: 20px 0; width: 100%;}
header #logo-bg #logo-container #sticky-logo {display: none;}
.page-scrolled header.sticky-nav #logo-bg #logo-container #logo {display: none;}
.page-scrolled header.sticky-nav #logo-bg #logo-container #sticky-logo {display: inline-block;}
header #logo-bg #logo-container .tagline-show {display: block;}
header #nav-container #site-navigation.top-nav {padding: 10px 0; text-align: center; width: 100%;}
header #nav-container #site-navigation.top-nav .nav-menu {margin: 0;}





/* -----------------------
 * RESPONSIVE MENU STYLES 
 * -----------------------*/

/* Menu - Drop-down */
#dropdown {text-align: center; width: 100%;}
#dropdown .menu-main-menu-container {width: 100%;}
#dropdown .menu-main-menu-container .nav-menu {list-style-type: none; margin: 0;}
#dropdown .menu-main-menu-container .nav-menu li {border-bottom: 1px solid #fff;}
#dropdown .menu-main-menu-container .nav-menu li:last-of-type {border-bottom: none;}
#dropdown .menu-main-menu-container .nav-menu li a {color: #fff; display: block; padding: 8px 0;}
#dropdown .menu-main-menu-container .nav-menu li .sub-menu {list-style-type: none; margin: 0;}
#dropdown .menu-main-menu-container .nav-menu li .sub-menu li {background-color: rgba(255, 255, 255, 0.2);}

#dropdown .menu-left-menu-container, #dropdown .menu-right-menu-container {width: 100%;}
#dropdown .menu-left-menu-container .left-nav-menu, #dropdown .menu-right-menu-container .right-nav-menu {list-style-type: none; margin: 0;}
#dropdown .menu-left-menu-container .left-nav-menu li, #dropdown .menu-right-menu-container .right-nav-menu li {border-bottom: 1px solid #fff;}
#dropdown .menu-right-menu-container .right-nav-menu li:last-of-type {border-bottom: none;}
#dropdown .menu-left-menu-container .left-nav-menu li a, #dropdown .menu-right-menu-container .right-nav-menu li a {color: #fff; display: block; padding: 8px 0;}
#dropdown .menu-left-menu-container .left-nav-menu li .sub-menu, #dropdown .menu-right-menu-container .right-nav-menu li .sub-menu {list-style-type: none; margin: 0;}
#dropdown .menu-left-menu-container .left-nav-menu li .sub-menu li, #dropdown .menu-right-menu-container .right-nav-menu li .sub-menu li {background-color: rgba(255, 255, 255, 0.2);}

/* Menu - Slide-in */
#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-container {width: 100%;}
#popout .menu-main-menu-container .nav-menu {display: block; list-style-type: none; margin: 0; width: 100%;}
#popout .menu-main-menu-container .nav-menu li {background-color: transparent; border-bottom: 1px solid #444; box-sizing: border-box; width: 100%;}
#popout .menu-main-menu-container .nav-menu li a {display: block; color: #fff; padding: 15px 20px;}
#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 
 * --------------------*/ 

/* Archive - Default (Big List) */
.post {border-bottom: 1px solid #ebebeb; margin-top: 35px; margin-bottom: 25px; padding-bottom: 25px; padding-right: 40px;}
.post:last-of-type {border-bottom: none;}
.post .post-title a {font-size: unset; text-decoration: none;}
.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 p {margin-bottom: 0;}

/* Archive - Small List */
.post.post-small {align-items: flex-start; display: flex;}
.post.post-small .post-image, .post.post-small .post-info {width: 50%;}
.post.post-small .post-image {margin-right: 20px; margin-top: 0;}
.post.post-small > .post-info {width: 100%;}
.post.post-small .post-meta {margin-bottom: 15px;}
.post.post-small .post-title {font-size: 20px;}

/* Archive - Grid */
.grid-list {align-items: flex-start; display: flex; flex-wrap: wrap;}
.grid-list .post.post-grid {border-bottom: none; width: 33%;}
.grid-list .post.post-grid .post-title {font-size: 18px;}

/* Sidebar - Default (Right) */
#post-sidebar {margin-top: 35px;}
#post-sidebar .vc_column-inner {background-color: #eee; padding: 15px;}
#post-sidebar .vc_column-inner div + div {margin-top: 30px;}
#post-sidebar .vc_column-inner h4 {text-transform: uppercase;}
#post-sidebar .vc_column-inner select {width: 100%;}
#post-sidebar .vc_column-inner #searchform div {display: flex;}
#post-sidebar .vc_column-inner #searchform div #s {width: calc(100% - 100px);}
#post-sidebar .vc_column-inner #searchform div #searchsubmit {width: 100px;}

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

/* Single */
.single-post .post p {margin-bottom: 15px;}

/* Comments */
.comments, #respond {margin-top: 40px;}
.comments .comment {list-style-type: none;}
.comments .comment .single-comment {align-items: flex-start; background-color: #eee; display: flex; margin-bottom: 10px; padding: 10px;}
.comments .comment .single-comment .comment-avatar {margin-right: 10px;}
.comments .comment .single-comment .comment-content .comment-meta {margin-bottom: 10px;}
.comments .comment .single-comment .comment-content .comment-meta .comment-author a {font-weight: bold;}
.comments .comment .single-comment .comment-content .comment-text {margin-bottom: 10px;}
.comments .comment .single-comment .comment-content .comment-reply-link {font-weight: bold; text-decoration: none; text-transform: uppercase;}
#commentform .comment-form-comment label {display: none;}
#commentform .comment-form-comment #comment {width: 100%;}
#commentform .form-submit {margin-top: 20px;}





/* --------------------
 * FOOTER STYLES 
 * --------------------*/
footer {color: #fff; padding: 20px;}
footer h4, footer p, footer li {color: #fff; word-break: break-all;}
footer p:last-of-type {margin-bottom: 0;}
footer a {text-decoration: none;}
footer #searchform div {display: flex;}
footer #searchform div #s {width: calc(100% - 100px);}
footer #searchform div #searchsubmit {width: 100px;}

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





/* --------------------
 * RESPONSIVE STYLES 
 * --------------------*/
@media screen and (max-width: 1230px) {
	/* Formatting */
	.container {margin: 0 30px;}
	
	/* Header */
	header #nav-container {margin: 0;}
	header #nav-container #logo, header #nav-container #sticky-logo {margin-left: 30px;}
	header #nav-container nav {margin-right: 30px;}
	
	/* Blog sidebar */
	#post-sidebar {box-sizing: border-box; margin-right: 15px; width: calc(25% - 15px);}
}

@media screen and (max-width: 900px) {
	/* Archive - Small List */
	.post .post-image img {margin-top: 0;}
	
	/* Blog sidebar */
	#post-sidebar .vc_column-inner #searchform div {flex-wrap: wrap;}
	#post-sidebar .vc_column-inner #searchform div #s, #post-sidebar .vc_column-inner #searchform div #searchsubmit {width: 100%;}
}

@media screen and (max-width: 800px) {
	/* Footer */
	footer .vc_col-sm-3 {margin-bottom: 20px; width: 50%;}
	footer .vc_col-sm-3:last-of-type {margin-bottom: 0;}
}

@media screen and (max-width: 768px) {
	/* Header */
	header #nav-container {flex-wrap: wrap; justify-content: space-between;}
	header #nav-container .tagline-show {display: block;}
	header #nav-container nav {width: auto;}
	header #nav-container nav .fa-brands {display: none;}
	header #nav-container #menu-toggle + .menu-main-menu-container #menu-main-menu {display: none;}
	header #nav-container #menu-toggle, header #nav-container #dropdown {display: inline-block;}
	
	/* Header - Center Logo */
	header #nav-container.center-nav #site-navigation {flex-wrap: nowrap; justify-content: left;}
	header #nav-container.center-nav #site-navigation #mobile-navigation {width: 50px;}
	header #nav-container.center-nav #site-navigation #logo, header #nav-container.center-nav #site-navigation #sticky-logo {max-width: unset; order: 1; text-align: left; width: auto;}
	header #nav-container.center-nav #site-navigation #left-site-navigation, header #nav-container.center-nav #site-navigation #right-site-navigation {width: auto;}
	header #nav-container.center-nav #site-navigation #left-site-navigation {margin-right: 0; order: 2;}
	header #nav-container.center-nav #site-navigation #left-site-navigation .left-nav-menu {margin-right: 0; text-align: left;}
	header #nav-container.center-nav #site-navigation #right-site-navigation {order: 3;}
	header #nav-container.center-nav #site-navigation #right-site-navigation .right-nav-menu {margin-left: 0; text-align: left;}
	#menu-toggle + #left-site-navigation, #menu-toggle + #left-site-navigation + #logo + #sticky-logo + #right-site-navigation {display: none;}
	
	/* Header - Top Logo */
	header #nav-container #site-navigation.top-nav {margin-right: 0;}
		
	/* Menu - Drop-down */
	#dropdown .nav-menu {display: none;}
	header #nav-container #dropdown .nav-menu li .sub-menu {background-color: rgba(255, 255, 255, .1); border: none; border-top: 1px solid #fff; display: block !important; position: static; text-align: center; width: 100%;}
		
	/* Menu - Slide-in */
	#popout .menu-main-menu-container .nav-menu li .sub-menu {background-color: transparent; border: none; border-top: 1px solid #444; display: block; position: static; width: 100%;}
	#popout .menu-main-menu-container .nav-menu li .sub-menu li:last-of-type {border-bottom: none;}
	#popout .menu-main-menu-container .nav-menu li .sub-menu li a {background-color: rgba(255, 255, 255, 0.1); padding: 10px 20px 10px 35px;}
	
	/* Blog */
	.blog .vc_col-sm-9, .blog .vc_col-sm-3 {width: 100%;}
	.blog .vc_col-sm-9 .post {padding-right: 0;}
	.single-post .vc_col-sm-9 {width: 100%;}
	.single-post .vc_col-sm-9 .post {padding-right: 0;}
	.left-sidebar .post {padding-left: 0;}
	
	/* Blog sidebar */
	#post-sidebar {margin-bottom: 40px; margin-top: 0; width: 100%;}
	#post-sidebar .vc_column-inner #searchform div #s {width: calc(100% - 100px);}
	#post-sidebar .vc_column-inner #searchform div #searchsubmit {width: 100px;}
	
	/* Footer */
	footer .vc_col-sm-3, footer .vc_col-sm-4, footer .vc_col-sm-6, footer .vc_col-sm-9, footer .vc_col-sm-12 {text-align: center; width: 100%;}
	footer .vc_col-sm-4, footer .vc_col-sm-6, footer .vc_col-sm-9 {margin-bottom: 20px;}
	footer .vc_col-sm-4:last-of-type, footer .vc_col-sm-6:last-of-type, footer .vc_col-sm-9:last-of-type {margin-bottom: 0;}
	footer #footer-copyright {text-align: center;}
	footer #footer-copyright .vc_col-sm-6 {margin-bottom: 0;}
	footer #footer-copyright .vc_row #footer-social {margin-top: 10px; text-align: center;}
}

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