/*!
Theme Name: The Active Age
Theme URI: http://theactiveage.com/
Author: Captain Coder
Author URI: http://captcoder.com/
Description: This is a Bootstrap 5 theme base custom built for The Active Age
Version: 2.0.0
License: GNU General Public License v2 or later
Text Domain: captcoder

captcoder is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

@import url("inc/normalize.css");
@import url("inc/xl.css");

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital@0;1&family=Oswald&display=swap');

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# HTML
# Body
# Navigation
# Links & Buttons
# Overall
# Home
# Bottom Includes
# Footer
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Colors
--------------------------------------------------------------*/
:root{
	--purple: #57276e;
	--green: #96cc6e;
	--black: #222222;
	--white: #ffffff;
	--orange: #ea6a56;
} 

/*--------------------------------------------------------------
# HTML
--------------------------------------------------------------*/
/* Make jump links scroll smoothly down the page */
html {scroll-behavior: smooth;}

/*--------------------------------------------------------------
# Body
--------------------------------------------------------------*/
/* Set the base font family and font size for ems here. Check with designer on desired paragraph font size */
body {font-size:18px;font-family:"Open Sans",Helvetica,Arial,sans-serif;overflow-x: hidden;line-height: 1.6;background: var(--purple);color:var(--white);}

@media only screen and (min-width:992px) {
	body {font-size:20px;}
}


/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
nav.navbar {background: var(--white);display: block;}

	ul.social {list-style: none;}

	.top-row {font-size: 0.8em;}
		.top-row a.btn {margin-right: 0.5rem;padding: 3px 15px;}
		#top-menu, #menu-top, ul.social {display: inline-block;}
			ul#menu-top, ul.social {list-style: none;margin-right: 1rem;padding-left: 1rem;}
				#menu-top > li, ul.social > li {display: inline-block;}
					#menu-top > li a {color: var(--purple);}
						#menu-top > li a:hover{color:var(--green);}
		.top-row form#searchform {display: inline-block;}
			.top-row input#s {width: 60%;padding: 1px 3px;}

	.toggler {margin-top: -4.5em;}
	.navbar-dark .navbar-toggler {background: var(--black);border-radius: 0;border-color: var(--black);}
	.navbar-brand img {max-height: 50px;padding-top:0.5rem;}

	.navbar-collapse {margin-top:2rem;margin-left: -15px;margin-right: -15px;padding-left: 15px;}
		.navbar-dark .navbar-nav .nav-link, .navbar-dark .navbar-nav .nav-link:visited {color:var(--purple);font-family: 'Oswald', sans-serif;text-transform: uppercase;font-size:1em;}
			.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:active, .nav-link:focus {color:var(--green);}

@media only screen and (min-width:992px) {
	.navbar-brand img {max-height: 70px;}
}
@media only screen and (min-width:1200px) and (max-width:1399px) {
	.top-row form#searchform {margin-top:1rem;}
	.top-row.form-block {padding-left: 5rem;}
}
@media only screen and (min-width:1200px) {
	.navbar-brand img {max-height: 100px;}
	.navbar-collapse {margin-top:0;margin-right: 0;margin-left: 0;padding-left: 0;background: transparent;}
		.navbar-dark .navbar-nav .nav-link, .navbar-dark .navbar-nav .nav-link:visited, .navbar-dark .navbar-nav .nav-link:hover {color: var(--purple);padding-right: 0.5rem;padding-left: 0.5rem;display: block; position: relative;}
			.navbar-dark .navbar-nav .nav-link:after {
				background-color: transparent;
				content: '';
				width: 0;
				height: 3px;
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				margin: 0 auto;
				-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
				-webkit-transition: width 0.2s ease;
				-moz-transition: width 0.2s ease;
				-o-transition: width 0.2s ease;
				transition: width 0.2s ease;
			}
				.navbar-nav .menu-item:hover > a:after {background-color: var(--purple);width: 100%;}

}
@media only screen and (min-width:1400px) {
	.top-row a:nth-of-type(1) {margin-left: 1.5rem;}
}

@media only screen and (min-width:1600px) {
	.navbar-brand img {max-height: 125px;}
	
	/* .top-row a.btn {margin-right: 2rem;} */
	.top-row input#s {width: 80%;}
}


/*--------------------------------------------------------------
# Buttons & Links
--------------------------------------------------------------*/
a, a:visited {color:var(--purple);}
	a:hover, a:active {color:var(--green);text-decoration: none;}
.btn,.gform_wrapper .gform_footer input[type=submit], .btn:visited,.gform_wrapper .gform_footer input[type=submit]:visited, a.more-link, a.more-link:visited {font-family: "Oswald", sans-serif; border-radius: 0;border: 0;background: var(--purple);color: var(--white);padding:10px 15px;transition: all 0.2s;font-size:1em;}
	.btn:hover, .btn:active, .gform_wrapper .gform_footer input[type=submit]:hover, .gform_wrapper .gform_footer input[type=submit]:active, a.more-link:hover, a.more-link:active {color:var(--white);background:var(--green);}
	span.showhover {display: none;transition: all 0.2s ease;}
		.btn:hover span.showhover, .btn:active span.showhover {display: inline-block;}
	a.more-link {display: block;width: 35%;text-align: center;margin-top: 1em;}


/*--------------------------------------------------------------
# Headings
--------------------------------------------------------------*/
h1,h2,h3,h4,h5,h6 {font-family: "Oswald", sans-serif;}




/*--------------------------------------------------------------
# Overall
--------------------------------------------------------------*/
.whitebg {background: var(--white);color:var(--black);}
.greenbg {background: var(--green);}

.align-btm {align-items: flex-end;}

.two-column h2, .half-image h2 {margin-top: 1em;}

.half-image .image img {width: 100vw;max-width: inherit;margin-left: -15px;}

.links a {font-size: 1.5em;font-weight: bold;margin-left: 1rem;margin-right: 1rem;display: inline-block;}

.ads img, .side img {max-height: 600px;width:auto;}

@media only screen and (min-width:768px) and (max-width:991px) {
	.half-image .image img {margin-left: calc((100vw - 100%) / -2) !important;margin-right: calc((100vw - 100%) / -2) !important;}
	.half-image h2 {margin-top:1em;}
}
@media only screen and (min-width:992px) {
	.half-image {overflow: hidden;}
		.half-image .image img {height: 100%;width: 80vw;}
		.half-image .image.left {min-height: 720px;}
			article.half-image .image.left {min-height: 680px;}
			.half-image .image.left img {right: 0;position: absolute;}
}
@media only screen and (min-width:1200px) {
	#primary {margin-top: -0.2rem;}
	.half-image .image.left {min-height: 720px;}
}
@media only screen and (min-width:1600px) {	
	.half-image .image img {width: 50vw;max-width: inherit;height: auto;}
}


/*--------------------------------------------------------------
# Home
--------------------------------------------------------------*/
/* article list */
.thumb {background: var(--black);text-align: center;;}
	.article-list .thumb img {max-height: 250px;width: auto;}
.widget {margin-bottom: 3em;}


@media only screen and (min-width:1200px) {
	.article-list, .featured {padding-left: 2rem;}
		.article-list .thumb img {max-height: 160px;}
	
	#specials img {max-height: 500px;width: auto;}
}

/*--------------------------------------------------------------
# Current Issue
--------------------------------------------------------------*/
/* fix iframe issue on mobile */
@media only screen and (max-width:767px) {
	.page-id-477 iframe, #issu iframe {height: 400px!important;}
}


/*--------------------------------------------------------------
# Categories
--------------------------------------------------------------*/
.article .thumb img {max-height: 400px;width: auto;}


/*--------------------------------------------------------------
# Single Articles
--------------------------------------------------------------*/
.caption {margin-top: 0.5rem;}


/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.top-contact .purple-box {padding: 2em 1em;background: #71147e;}

@media only screen and (min-width:992px) {
	.top-contact .purple-box {margin-top: -6em;}
}



/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/
input#searchsubmit {font-family: "Font Awesome 5 Pro";background: var(--purple);padding: 6px 7px;border: 0;color: var(--white);}
input#s {width: 80%;padding: 3px;}
h2.widget-title {margin-top: 1em;}


/*--------------------------------------------------------------
# Bottom Includes
--------------------------------------------------------------*/
/* Call to Action */
#cta {margin:0;padding:2em 0;background:#507dbc;}
	#cta:hover {background:#aeb7b3;}
	#cta h6 {color: #fff;text-transform: uppercase;font-size: 1.8em;font-weight: bold;margin:0;}
		#cta:hover h6 {color:#507dbc;}
		#cta:hover span.showhover, #cta:active span.showhover {display: inline-block;}
		#cta h6 p {margin-bottom: 0;}




/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer.footer .main-foot {background: var(--black);color:var(--white);padding-top: 2em;}
	footer.footer a {color: var(--white);}
		footer.footer a:hover {color: #aeb7b3;}
	.foot-nav ul {list-style: none;-webkit-padding-start: 0;}
	.phone {font-size: 1.5em;margin-top:1em;margin-bottom: 1em;}
	.social h4 {margin-bottom: 0;}
	.social .fab {margin: 15px;font-size: 1.5em;}

#siteinfo {font-size: 0.8em;}


@media only screen and (min-width:1200px) {
	.main-foot .row {align-items: flex-end;}
		#footer-nav ul>li {display: inline-block;}
}