/******************************************************************************
* Title: style.css
* Author: Hunter Schoonver ~ http://hunterschoonover.com
* Version: 1.0
* 
* This cascading style sheet provides a general look and feel for this theme.
*
* Table of contents:
*
*   FONTS
*   ELEMENTAL
*   HEADER
*   FOOTER
*   CONTENT
*
*/

/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */
/* GENERAL -- styling and classes that can be used in multiple sections */

.brandColor {
    color: #1e73be !important;
}

.brandColorHoverToWhite {
    color: #1e73be;
	transition: background-color 0.75s, color 0.75s;
}
.brandColorHoverToWhite:hover {
    color: #ffffff;
}

.brandColorHoverToBrandColorOuter:hover .brandColorHoverToBrandColor {
    color: #1e73be;
}

.brandColorHoverToBrandColor {
    transition: background-color 0.75s, color 0.75s;
}
.brandColorHoverToBrandColor:hover {
    color: #1e73be;
}

.brandColorHoverToBrandColor2 {
    transition: background-color 0.75s, color 0.75s;
}
.brandColorHoverToBrandColor2:hover {
    color: #1e73be;
}

body {
	background-attachment: fixed;
	background-position: center; 
	background-repeat: no-repeat; 
    background-size: cover;
}

.section {
	width: 100%;
}

.sectionBookmark {
	position: absolute; 
	top: 1px;
}

a {
    color: #008fb3;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

.mainBackground {
	background-image: url(/images/diagonalStripesBackground.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.backgroundOverlayWhite {
	width: 100%; 
	height: 100%; 
	background-color: rgba(255, 255, 255, .9);
    padding-top: 20px;
    padding-bottom: 20px;
}

.backgroundOverlayBlack {
	background-color: rgba(0, 0, 0, 0.7); 
}

.topAndBottomMargin {
    margin: 20px 0 0 20px;
}

.fullScreenHeightParent {
	min-height: 100vh;
	display: inline-flex;
	flex-direction: column;
}

.fullScreenHeightChild {
	flex: 1;
}

/* end of GENERAL */
/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */
/* SECTION -- basic styling for all sections */

.backgroundOverlay {
    width: 100%; 
	height: 100%;
}

.backgroundTransparent {
    background-color: transparent;
}

.heightFullScreen {
    height: 100%;
}

/* end of SECTION */
/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */
/* LANDING SECTION -- styling for the Landing Section -- includes website's Header & Navigation Bar */

/* ------------------------------------------------------------------------------------------------ */
/* Header & Navigation Bar -- Styling for the Header & Navigation Bar */

#siteIdentity {
	height: 40px;
	color: #fff; 
	cursor: pointer;
	float: left; 
	font-size: 20px;
	padding: 5px 0 0 0;
	text-decoration: none;
}

#siteIdentity img {
	width: 32px; 
	vertical-align: middle;
}

#siteIdentity span {
	margin-left: 5px; 
	vertical-align: middle;
}

#header {
	width: 100%;
	height: 55px;
	color: #fff;
	font-family: 'Lato', sans-serif;
	padding: 10px 20px 0px 20px;
}

#logo {
	width: 100px;
	height: 100px;
	background-image: url('aa_images/logo-100-by-100.png'); 
	float: left;
}

.navBar {
	display: inline-block;
	float: right;
	margin: 0;
	padding: 0;
}

.navBar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
	
}

.navBar li {
	border-bottom: 0;
	box-sizing: border-box;
	display: inline-block;
	font-family: 'Lato', sans-serif;
	font-size: 15px;
	text-align: center;
}

.navBar li a {
	height: 40px;
	border: 1px solid transparent;
	color: #fff;
    display: block;
	padding: 10px;
    text-align: center;
    text-decoration: none;
	transition: background-color, border-color 0.35s ease;
	
}

/* Change the link color on hover */
.navBar li a:hover {
	background-color: rgba(255, 255, 255, 0.1); 
    border: 1px #fff solid;
}

/* Styling for when narrower than 500px */
@media (max-width: 500px) {
	
	#companyName {
		width: 100%;
		font-size: 25px;
		text-align: center;
	}
	
	#header {
		height: 100px;
	}
	
	.navBar {
		width: 100%;
		display: inline-block;
		margin-top: 5px;
		text-align: center;
	}
	
	.navBar li {
		font-size: 12px;
	}
	
	.navBar li a {
		height: 35px;
	}
	
}

/* end Header & Navigation Bar */
/* ------------------------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------------------------ */
/* Content -- Styling for the Content section of LANDING SECTION */

#landingSection_backgroundOverlay {
	background-color: rgba(0, 0, 0, 0.7); 
	position: relative;
	text-align: center; 
}

#landingSection_button {
	width: 400px;
	display: inline-block;
	margin-top: 80px;
}

#landingSection_button a {
	width: 100%;
	border: 2px solid white; 
	color: #fff; 
	cursor: pointer;
	display: block; 
	font-size: 50px; 
	padding: 5px 12px 7px; 
	text-align: center;
	text-decoration: none;
	transition: background-color 0.75s, color 0.75s;
}

#landingSection_button a:hover {
	background-color: #fff;
    color: #1e73be;
}

#landingSection_content {
	width: 100%; 
	bottom: 10%;
    padding: 0;
	position: absolute;
	top: 55px;
    vertical-align: bottom;
}

#landingSection_contentInnerContainer {
	width: 100%; 
    height: 100%; 
    position: relative;
}

#landingSection_contentContents {
	width: 100%; 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.landingSection_textLarge {
	width: 100%; 
	color: #fff; 
	display: inline-block;
	font-weight: 400; 
	font-size: 200px; 
	margin: 0;
	padding: 5px 12px 7px; 
	text-align: center;
}

/* Styling for when narrower than 500px */
@media (max-width: 500px) {
	
	#landingSection_button {
		width: 200px;
		margin-top: 40px !important;
	}
	
	#landingSection_button a {
		font-size: 25px !important; 
	}
	
	#landingSection_content {
		top: 100px;
	}
    
	.landingSection_textLarge {
		font-size: 60px !important; 
	}
	
}

/* Styling for when wider than 500px and narrower than 1000px */
@media (min-width: 501px) and (max-width: 1000px) {
	
	#landingSection_button {
		margin-top: 25px;
	}
    
	.landingSection_textLarge {
		font-size: 100px; 
	}
	
}

/* Styling for when shorter than 500px */
@media (max-height: 500px) {
	
	#landingSection_button {
		width: 200px;
		margin-top: 40px !important;
	}
    
	#landingSection_button a {
		font-size: 25px !important; 
	}
    
	.landingSection_textLarge {
		font-size: 60px !important; 
	}
	
}

/* Styling for when shorter than 700px */
@media (max-height: 700px) {
    
	.landingSection_textLarge {
		font-size: 100px; 
	}
	
}

/* Styling for when wider than 1000px and taller than 700px */
@media (min-width: 1000px) and (min-height: 700px) {
    
	#landingSection_contentTableCell {
		vertical-align: top !important;
	}
	
}

/* end Content */
/* ------------------------------------------------------------------------------------------------ */

/* end of LANDING SECTION */
/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */
/* CATEGORIES -- styling for categories boxes */

#categoriesContainer {
	width: 100%;
	min-height: 100vh;
    border-top: 2px #d9d9d9 solid;
    border-bottom: 1px #d9d9d9 solid;
	display: inline-flex;
	flex-direction: column;
	font-family: Arial;
	position: relative;
	text-align: center;
}

.categories_row {
	width: 100%; 
	display: inline-block; 
	padding: 0;
}

.categories_categoryBox {
	max-width: 275px;
	color: #69696f;
	display: inline-block;
	font-size: 23px;
	margin: 50px 50px 0 50px;
    text-align: center;
	vertical-align: top;
}

.categories_categoryBox_content {
	max-width: 350px;
	display: inline-block;
}

#noveltyResolutions_panel_categoriesPage_section_cat1_button {
	background-color: #00cc00;
	transition: background-color 0.75s, color 0.75s;
}
#noveltyResolutions_panel_categoriesPage_section_cat1_button:hover {
	background-color: transparent;
	border: 2px #00cc00 solid;
	color: #00cc00;
}

#noveltyResolutions_panel_categoriesPage_section_cat2_button {
	background-color: #3499e0;
	transition: background-color 0.75s, color 0.75s;
}
#noveltyResolutions_panel_categoriesPage_section_cat2_button:hover {
	background-color: transparent;
	border: 2px #3499e0 solid;
	color: #3499e0;
}

#noveltyResolutions_panel_categoriesPage_section_cat3_button {
	background-color: #8a74b9;
	transition: background-color 0.75s, color 0.75s;
}
#noveltyResolutions_panel_categoriesPage_section_cat3_button:hover {
	background-color: transparent;
	border: 2px #8a74b9 solid;
	color: #8a74b9;
}

#noveltyResolutions_panel_categoriesPage_section_basic_title {
	width: 100%;
	color: #69696f;
	display: inline-block;
	font-family: Arial;
	font-size: 50px; 
	padding: 20px 0 0 0;
	text-align: center;
}

.categoryBox_btn {
	width: 100%;
	max-width: 100%;
	font-size: 20px; 
	margin: 20px 0 0 0; 
    text-align: center;
}

.categoryBox_btn a {
	border: 2px transparent solid;
	color: #fff;
	display: block; 
	padding: 15px;
	text-decoration: none;
}

.categories_categoryBox ul {
	color: #69696f;
	list-style-type: circle;
	margin: 0;
	padding-left: 20px;
	text-align: left;
}

.categories_categoryBox ul li {
	margin-left: 0;
	padding-bottom: 20px;
}

.categoryBox_title {
	font-size: 20px; 
	font-weight: bold; 
	margin-top: 40px; 
	text-align: left;
}

.categoryBox_image {
	width: 275px;
	height: 275px;
	background-position: center;
    background-size: cover;
	display: inline-block;
	padding: 0;
	margin: 0;
}

/* Styling for when narrower than 860px */
@media (max-width: 880px) {
	
	.categories_categoryBox {
		width: 100%;
		max-width: 100%;
        border-top: 1px #000 solid;
		margin-left: 0;
        margin-right: 0;
		margin-top: 50px;
        padding: 5px;
		padding-top: 50px;
	}
	
	.categoryBox_btn {
		margin-top: 0; 
	}

	.categoryBox_image {
		width: 100%;
		max-width: 350px;
		height: 350px;
	}
	
}

/* Styling for when wider than 880px and narrower than 1100px */
@media (min-width: 881px) and (max-width: 1200px) {
	
	.categoryBox_btn {
		margin-top: 0; 
	}
	
	.categories_categoryBox {
		margin-left: 5px;
        margin-right: 5px;
	}
	
}

/* end of CATEGORY SECTION */
/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */
/* ACTION SECTION -- styling for the Action Section */

#actionSection {
	width: 100%;
	height: 100%;
	max-height: 500px;
	background-color: transparent;
    border-top: 1px #d9d9d9 solid;
    border-bottom: 1px #d9d9d9 solid;
	display: table;
	padding: 0;
	text-align: left;
}

#actionSection_backgroundOverlay {
	width: 100%; 
	height: 100%; 
	background-color: rgba(0, 0, 0, .7);
	display: table-cell;
	text-align: center; 
	vertical-align: middle;
}

#actionSection_button {
	width: 300px;
	display: inline-block;
	margin-top: 60px;
}

#actionSection_button a {
	width: 100%;
	border: 2px solid white; 
	color: #fff; 
	cursor: pointer;
	display: block; 
	font-size: 30px; 
	padding: 5px 12px 7px; 
	text-align: center;
	text-decoration: none;
	transition: background-color, border-color 0.35s ease;
}
#actionSection_button a:hover {
	background-color: rgba(255, 255, 255, 0.1); 
}

#noveltyResolutions_panel_homePage_section_action_title {
	width: 100%;
	background-color: transparent;
	color: #fff;
	display: inline-block;
	font-family: Arial;
	font-size: 80px;
	text-align: center;
}

#actionSection_subTitle {
	width: 100%; 
	color: #e4e4e7; 
	display: inline-block;
	font-family: Courier;
	font-size: 18px; 
	padding: 20px 0 0px 0;
}

#noveltyResolutions_panel_homePage_section_action_tinyLink {
    width: 100%;
    color: #e4e4e7;
    display: inline-block;
	font-family: Arial;
    font-size: 16px;
    padding: 10px 12px 7px;
    text-align: center;
	text-decoration: none;
}
#noveltyResolutions_panel_homePage_section_action_tinyLink:hover {
    color: #fff;
}

/* Styling for when narrower than 300px */
@media (max-width: 400px) {
	
	#actionSection_button {
		width: 200px;
	}

	#actionSection_button a {
		font-size: 25px; 
	}
	
	#noveltyResolutions_panel_homePage_section_action_title {
		font-size: 45px;
	}
	
	#actionSection_subTitle {
		font-size: 13px;
	}
	
}

/* Styling for when wider than 300px and narrower than 500px */
@media (min-width: 401px) and (max-width: 500px) {
	
	#noveltyResolutions_panel_homePage_section_action_title {
		font-size: 60px;
	}
	
	#actionSection_subTitle {
		font-size: 15px;
	}
	
}

/* end of ACTION SECTION */
/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */
/* CONTACT INFO SECTION -- styling for the Contact Info Section */

#contactinfoBoxes {
	width: 100%; 
	background-color: #e6e6e6; 
    border-top: 1px #d9d9d9 solid;
    border-bottom: 1px #d9d9d9 solid;
	display: inline-block; 
	padding: 100px 0 100px 50px;
	text-align: center;
}

#contactinfoBoxes_bubble_aiyana {
	margin-left: 100px;
}

.contactinfoBoxes_bubble {
	color: #69696f;
	display: inline-block;
	text-align: left;
	vertical-align: top;
}

.contactinfoBoxes_contactName {
	font-size: 25px;
}

.contactinfoBoxes_contactInfo {
	margin: 10px 0 0 30px;
	padding: 0;
}

.contactinfoBoxes_contactInfo li {
	font-size: 20px;
	list-style: none;
	margin: 0;
	padding: 5px 0 5px 0;
}

/* Styling for when narrower than 200px */
@media (max-width: 800px) {
	
	#contactinfoBoxes {
		padding: 50px 0 50px 50px;
	}
	
	#contactinfoBoxes_bubble_aiyana {
		margin-top: 60px;
		margin-left: 0;
	}
	
	.contactinfoBoxes_bubble {
		width: 100%;
	}
	
	.contactinfoBoxes_contactName {
		font-size: 20px;
	}

	.contactinfoBoxes_contactInfo li {
		font-size: 15px;
	}
	
}

/* end of CONTACT INFO SECTION */
/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */
/* PAGES & POSTS -- styling for all pages & posts */

.articleBubble {
    width: 100%;
    max-width: 725px;
    border-bottom: 1px #8c8c8c solid;
    border-top: 1px #8c8c8c solid;
    display: table;
    margin: 0 auto;
    padding: 15px;
    text-align: left;
}
.articleBubble:hover {
    border-bottom: 1px #000 solid;
    border-top: 1px #000 solid;
}

.articleBubble h2 {
	margin-top: 50px;
}

.articleBubbleLeft {
    width: 45%;
    height: 100%;
    background-position: center center;
	background-repeat: no-repeat;
    background-size: 100% auto;
    border-radius: 3px;
    display: table-cell;
    position: relative;
    vertical-align: top;
}
.articleBubbleLeft a {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.articleBubbleRight {
    width: 55%;
    height: 100%;
    display: table-cell;
    padding: 0 0 0 20px;
    text-align: left;
    vertical-align: top;
}

.articleTitle a {
    color: #000;
    font-size: 40px;
}
.articleTitle a:hover {
    color: #000;
    text-decoration: none;
}

.articleAuthor {
    border-right: 1px #a6a6a6 solid;
    display: inline-block;
    padding: 0 5px;
}

.articleAuthorDate {
    width: 100%;
    color: #a6a6a6;
    display: inline-block;
    font-size: 17px;
    margin: 15px 0 0 0;
    text-align: right;
}

.articleDate {
    display: inline-block;
    padding: 0 5px;
}

.articleImage {
    width: 100%;
    display: inline-block;
    padding: 20px 0 10px 0;
    text-align: center;
}

.articleImage img {
    width: 100%;
    max-height: 300px;
    display: inline-block;
	object-fit: cover;  /* Crop images nicely */
}

.articleImageNarrow {
    width: 100%;
    height: 150px;
    background-position: center center;
	background-repeat: no-repeat;
    background-size: 100% auto;
    border-radius: 3px;
    display: none;
    position: relative;
    visibility: hidden;
}
.articleImageNarrow a {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.articleReadButton {
    width: 100%;
    display: inline-block;
    margin: 50px 0 0 0;
    text-align: right;
}

.articleReadButton a {
    width: 215px;
    border: 1px solid #8c8c8c;
    color: #8c8c8c;
    cursor: pointer;
    display: inline-block;
    font-size: 20px;
    margin: 0;
    padding: 8px 60px;
    text-align: center;
    text-decoration: none;
    transition: all 250ms linear;
}
.articleReadButton a:hover {
    border: 1px #000 solid;
    color: #000;
    transition: all 250ms linear;
}

.articleWords {
    width: 100%;
    color: #333333;
    display: inline-block;
    font-family: Arial;
    font-size: 19px;
    line-height: 32px;
    margin: 0;
    padding: 20px 0 0 0;
    text-align: center;
}

.articleWordsContainer {
    width: 100%;
    max-width: 725px;
    display: inline-block;
    text-align: left;
}

.articleImageAndWordsSideBySide {
	display: flex;
	align-items: start; /* Align items vertically */
	gap: 20px; /* Space between items */
	flex-wrap: wrap;
}

.articleImageAndWordsSideBySide img {
	width: 40%;
	height: 250px;
	object-fit: cover;
}

.articleImageAndWordsSideBySide div {
	flex: 1; /* Take up remaining space */
	display: flex;
	flex-direction: column;
}

.articleImageAndWordsSideBySide div p {
	margin: 0 0 10px 0; /* Add space between paragraph and list */
}

.articleImageAndWordsSideBySide div ul {
	margin: 0;
	padding-left: 20px; /* Ensure proper list indentation */
	list-style-type: disc;
}

.articleWords iframe {
    max-width: 100%;
}

.articleActionButtonContainer {
	width: 100%;
	text-align: center;
}
.articleActionButtonContainer .categoryBox_btn {
	display: inline-block;
}
.articleActionButtonContainer #noveltyResolutions_panel_categoriesPage_section_cat1_button {
	padding-left: 100px;
	padding-right: 100px;
}
.articleActionButtonContainer #noveltyResolutions_panel_categoriesPage_section_cat2_button {
	padding-left: 100px;
	padding-right: 100px;
}
.articleActionButtonContainer #noveltyResolutions_panel_categoriesPage_section_cat3_button {
	padding-left: 100px;
	padding-right: 100px;
}

/* Styling for when narrower than 600px */
@media (max-width: 600px) {
    
    .articleAuthorDate {
        margin: 15px 0 15px 0;
        text-align: left;
    }
    
    .articleBubble {
        height: auto;
    }
    
    .articleBubbleLeft {
        width: 0;
    }

    .articleBubbleRight {
        width: 100%;
        height: 100%;
        padding: 0;
    }
    
    .articleImageNarrow {
        display: inline-block;
        visibility: visible;
    }
    
    .articleReadButton {
        margin: 15px 0 0 0;
        text-align: center;
    }
    
    .ArticleWords {
        font-size: 18px;
        line-height: 30px;
    }
    
}

/* Styling for when narrower than 735px */
@media (max-width: 735px) {
    
    .articleAuthorDate {
        font-size: 12px;
    }
    
    .articleTitle a {
        font-size: 30px;
    }

    .articleSubTitle {
        font-size: 20px;
    }

	.articleImageAndWordsSideBySide img {
		width: 100%;
		max-width: 400px;
	}
	
	.articleImageAndWordsSideBySide div {
		width: 100%;
		flex: auto;
	}
    
}

/* end of PAGES & POSTS */
/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */
/* POSTS SECTION -- styling for the Contact Info Section */

.postsSection {
	width: 100%; 
	background-color: #e6e6e6; 
    border-top: 1px #d9d9d9 solid;
    border-bottom: 1px #d9d9d9 solid;
	display: inline-block; 
    font-family: 'Lato', sans-serif;
    font-size: 20px;
	padding: 50px 0 50px 0;
	text-align: center;
}

.postsSection p {
    margin-top: 15px;
}

.postsSection_title {
    width: 100%;
	color: #69696f;
	display: inline-block;
	font-family: Arial;
	font-size: 50px; 
	padding: 20px 0 0 0;
	text-align: center;
}

.postsSection_date {
    font-size: 12px;
    font-weight: normal;
}

.postsSection_excerpt, .postsSection_link {
    font-size: 14px;
    font-weight: normal;
}

.postsSection_link {
    text-align: right !important;
}

.nav-links {
    color: #008fb3;
    font-size: 16px;
    text-align: center;
}

.nav-previous, .nav-next{
    max-width: 200px;
    display: inline-block;
    margin: 0 40px;
    padding: 15px 0;
    text-align: left;
}

.nav-previous:before {
    content: "\2190";
    padding-right: 2px;
}
.nav-next:after {
    content: "\2192";
    padding-left: 2px;
}

.nav-previous:hover:before, .nav-previous:hover a,
.nav-next:hover:after, .nav-next:hover a{
    text-decoration: underline;
}

/* Styling for when narrower than 630px */
@media (max-width: 630px) {
    
    .nav-previous, .nav-next{
        margin: 0 15px;
    }

}

/* end of POSTS SECTION */
/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */
/* FOOTER SECTION -- styling for the Footer Section */

.footerSection {
	width: 100%;
	height: 35px;
	background-color: #000;
	color: rgb(77, 77, 77);
	display: inline-block;
	font-size: 14px;
	margin: 0;
	padding: 10px;
	text-align: center;
}

/* end of FOOTER SECTION */
/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */