@charset "UTF-8";
/* CSS Document */

/* Use this class to not render certain elements */
.ppbs-display-none {
	display: none !important;
}

/* ORANGE #fb6400; */

/* NORMAL ORANGE */
.ppbs-orange-color,
h1.ppbs-orange-color {
	color: #fb6400 !important;
}
.ppbs-orange-bgcolor {
	background-color: #fb6400 !important;
}
/* DARKER ORANGE */
a.ppbs-orange-color:hover {
	color: #d94500 !important;
}
/* DARKER ORANGE */
a.ppbs-orange-bgcolor:hover {
	background-color: #d94500 !important;
}
/* LIGHT ORANGE */
.ppbs-light-orange-color {
	color: #fff3eb !important;
} 
.ppbs-light-orange-bgcolor {
	background-color: #fff3eb !important;
} 
.ppbs-bold-orange-link {
	color: #fb6400 !important;
	font-size: 1.3em !important;
	font-weight: 600 !important;
}
.ppbs-bold-orange-link:hover {
	color: #441e1b !important;
	text-decoration: underline !important;
}
.ppbs-brown-border {
	border: 1px solid #441e1b !important;
}

/* SLIDER STYLES */

/* Styles without media queries are less than the following queries */
ul.slides li {
	/* Min height of slider picture box */
	min-height: 200px !important;
	background-size: cover !important;
}
/* Min height of slider picture box */
#joy-of-reading-title {
	color: #ffe0bd !important;
	font-size: 3em !important;
	width: 90% !important;
	font-weight: 600 !important;
	padding-top: 60px !important;
}
/* 630px and up */
@media screen and (min-width: 320px) {
	#joy-of-reading-title {
		font-size: 2em !important;
		width: 60% !important;
	}
}
/* 768px and up */
@media screen and (min-width: 768px) {
	#joy-of-reading-title {
		width: 90% !important;
		padding-top: 60px !important;
		padding-bottom: 90px !important;
	}
	ul.slides li {
	/* Min height of slider picture box */
	min-height: 340px !important;
	background-size: cover !important;
	}
}
/* 630px and up */
@media screen and (min-width: 1200px) {
	#joy-of-reading-title {
		font-size: 2.7em !important;
	}
}
@media screen and (min-width: 1472px) {
	#joy-of-reading-title {
		font-size: 3em !important;
	}
}

/* Container for navigation */
div.headermenu {
/*margin-top: 200px !important;*/
}
/* Container for navigation */
@media screen and (min-width: 1088px) {
div.headermenu {
/*    background-color: lime !important; */
	background-color: #fff3eb !important;
	padding-bottom: 30px !important;
	}
}
@media screen and (min-width: 1089px) {
div.headermenu {
/*    background-color: lime !important; */
	background-color: #fff3eb !important;
	padding-bottom: 100px !important;
	}
}
/* Container for navigation */
@media screen and (min-width: 1472px) {
div.headermenu {
/*    background-color: lime !important; */
	background-color: #fff3eb !important;
	padding-bottom: 46px !important;
	}	
}

/* ******************* NAVIGATION EDITS ************************** */
/* color background of logo div */
.navbar-brand {
	background-color: #fff3eb !important;
}
/* user icons on right of nav */
a.navbar-item:hover {
    color: #fb6400 !important;
}
.navbar.is-fixed-top {

}
/* Reduce padding on the breadcrumbs */
.breadcrumb-section.is-small {
	padding-top: 1.5rem !important;
	padding-bottom: 0.5rem !important;
}
/*a.navbar-item:hover {
	background-color: #fb6400;
	color: #fff;
}*/
nav#main-nav {
	background-color: #fff3eb !important;
	padding-top: 20px !important;
	height: 100px !important;
}
/* 768px and up */
@media screen and (min-width: 768px) {
nav#main-nav {
	height: 122px !important;
	}
}
/* MENU LAYOUT SET TO TWO TIER IN INFIGO split menu elements part of two tier layout */

div.split-menu-container {
	background-color: #fff3eb !important;
}
/* First menu container div */
nav.navbar {
        background-color: blue !important;
		background-color:  #fff3eb !important;
        padding: 10px !important;
        padding: 0px !important;
		height: fit-content !important;
		max-width: 1200px !important;
		margin: auto !important;
}
/* second menu container div */

    div#bottom-splitmenu {
        background-color: red !important;
		background-color:  #fff3eb !important;
        padding: 10px;
        padding: 0px;
        display: flex !important;
        flex-wrap: wrap !important;
		/* This allows nav divs to wrap. Not sure why */
		flex-shrink: 1 !important;
		justify-content: left !important;
    }

/* Second menu container div */
div#bottom-splitmenu > div {
	background-color: yellow !important;
	background-color: #fff3eb !important;
	display: flex !important;
	flex-wrap: wrap !important;
	height: fit-content;
	justify-content: left !important;
}
/* get container div to expand with main nav elements */
div.bottom-menu-split.is-fullwidth.is-hidden-touch {
	background-color: red !important;
	background-color: #fff3eb !important;
	width: 100% !Important;
}
/* get container div to expand with main nav elements */
div.bottom-menu-split.is-fullwidth.is-hidden-touch > div.container {
	background-color: lime !important;
	background-color: #fff3eb !important;
	display: flex !important;
	width: 100% !Important;
}
.catfish-button:hover, .catfish-button.is-hovered, .button:hover, .button.is-hovered {
    border-color: transparent;
    color: #fff;
    background: #FB6400;
}
@media screen and (min-width: 1088px) {
   div.navbar-start {
   		max-width: 800px;
        background-color: #fff3eb !important;
		flex-wrap: wrap;
    }
}
/* Make My Account/Cart/Search buttons text Larger */
div.navbar-start div.navbar-item.is-shown a.navbar-link,
div.navbar-start div.navbar-item div.buttons a {
/*	background-color: #fff3eb !important;
    color: lime !important;*/
	font-size: 16px !important;
}
   div.navbar-start a.navbar-item {
    background-color: #fff3eb !important;
	font-size: 16px !important;
}
@media screen and (min-width: 1088px) {
   div.navbar-start {
	border: 0 !important;
	background-color: #fff3eb !important;
    }
}
div.navbar-dropdown {
	border: 0 !important;
	background-color: #fff3eb !important;

}
/* Don't want a hover background color. Make the same color as the non-hover color */
div.navbar-start .navbar-link,
div.navbar-start .navbar-link:hover {
	background-color: #fff3eb !important;
}
/* Make My Account/Cart/Search buttons hover color orange */
div.navbar-item div.buttons a.button:hover {
	background-color: #fb6400 !important;
}
/* ******************* END NAVIGATION EDITS ************************** */





/* CATEGORY LANDING PAGE */

/* Hide large section intended for category title and description */
section.category-intro-wrapper.section {
	/* background-color: red !important; */
	display: none !important;
}
/* Remove some top and bottom padding from content page filler */
div.topicpage {
	padding-top: 3rem !important;
	padding-bottom: 3rem !important;
}
/* Hide System Page Title 
div.page-title h1 {
	display: none !important;
}*/
/* Add bottom margin to NEW ADDRESS button in address book. Required after hiding the system Page Title above  */
div.addAddressButtonWrapper {
	margin-bottom: 0.5rem;
}
/* Remove top padding above top row of products on category page */
section.category-product-section.section {
	padding-top: 0 !important;
}

/* Reduce crazy large top padding below breadcrumbs */

div.navigationmenu {
	padding-top: .5rem;
}
section.category-intro-wrapper section {
	padding-top: .5rem;
}
div.listItem {
	padding-top: 50px !important;
}
/* Make images fit box on category page, otherwise system over sizes them */
div.product-item--image > div.picture > a > img {
	height: 100% !important;
	width: auto !important;
	margin: auto !important;
}

/* SEARCH PAGE */
/* Adjust search bar on smaller browser widths and make parent elements transparent */
div.headermenu > nav > div.section.is-small.nav-search-container.is-flex.navbar.ict-navbar.is-fixed-top.two-tier-search.is-active,
div.headermenu > nav > div.section.is-small.nav-search-container.is-flex.navbar.ict-navbar.is-fixed-top.two-tier-search.is-active > div.container.is-flex {
	background-color: transparent !important;
	}

/* Move search box down in order to make room for double line nav bar */
div.search-box {
	margin-top: 70px !important;
}
@media screen and (min-width: 1088px) {
div.search-box {
	margin-top: 110px !important;
    }
}



/* ******************* CHECK OUT STUFF ************************** */


/* check out modal width */
div.modal-card.new-modal {
    max-width: 80% !important;
    height: 80% !important;
}


/* Give Check Out As Guest button some breathing room */
input.checkoutasguestbutton.catfish-button {
	margin-top: 24px !important;
}
/* color round check mark green when selected shipping method */
.one-page-checkout #opc-shipping_method .shipping-options .shipping-options__list .shipping-option-item input:checked + label:after {
	background-color: #00c409 !important;
	color: white !important;
}
/* color round check mark green when selected payment method */
.one-page-checkout #opc-payment_method .payment-methods .payment-method__list .payment-method-item input:checked + label::after {
	background-color: #00c409 !important;
	color: white !important;
}
/* TRY TO Adjust font on order review page just before payment is made. DOESN'T WORK */
.address-floating-placeholder-float, .floating-placeholder-float {
    font-size: 13px !important;
}
/* TRY TO Adjust font on order review page just before payment is made. DOESN'T WORK */
.address-floating-placeholder, .floating-placeholder {
    font-size: 13px !important;
}
/* TRY TO Adjust font on order review page just before payment is made. DOESN'T WORK */
.address-floating-placeholder[_ngcontent-c7] input[_ngcontent-c7] {
	font-size: 10px !important;
}
/* Hide the useless footer on the order review modal */
div.modal-card.new-modal > footer.has-footer-content.content.with-extented-content.modal-card-foot {
	display: none !important;
}

/* ******************* END CHECK OUT STUFF ************************** */

/* ******************* START ACCOUNT PAGES ALTERATIONS ************************** */
.orderLineItems tbody tr.order-line-items-row {
    background: #f6fbff !important;
    color: rgb(34,34,34) !important;
}
/* Make the 'Add New Address' to address book Modal window bigger */
.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-draggable.ui-resizable {
    height: 1000px !important;
    width: 80% !important;
    top: 10% !important;
    left: 10% !important;
}
/* Remove footer and tawk widget div from from 'Add New Address' pop up Modal window
Footer disappears, widget div doesn't. Turned off pop modal in config > Settings > Customer Settings > Addresses = Use popup Address Edit Windows */
body.popup.popup-container footer, body.popup.popup-container div.widget-visible {
	display: none !important;
}

/* ******************* END ACCOUNT PAGES ALTERATIONS ************************** */