/* CSS Document */

/*
The primary stylesheet for Flexbox Menu Demo web page. This sheet pulls in all the components in order of appearance.
*/
@import url('color/color_new.css');

.bg-site1{
 	color: #7b7c61;
}

.whitebox img{
	max-height:302px;
	width:210px;
	
}
.toggled-on{ display:none;}
.headermessage{
	font-size:1.1em;
	text-align:center;
	padding: 1em 0;
	color: #7b7c61;
}
.blurb{
	font-size:.7em;
	padding:10px;
}
.WB0, .WB1, .WB2, .WB3, .WB4, .WB5, .WB6, .WB7, .WB8{
	/*width:400px;*/
	border-radius:9px;
	/*float:left;*/
}
h1, h5{
	/*font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black"!important;*/
	font-family: sans-serif;
	font-weight:600;
	}
.centertex{ 
	text-align:center;
	font-size:0.9em!important;
	font-weight:800;
	font-weight:bolder;
	color: azure;
	text-shadow: 2px 2px #000000;
	font-family: sans-serif!important;
}
.cost{
	text-align:center;
	font-size:0.8em!important;
}
.sizeOption{
	text-align: center;
	margin-bottom:20px;
}
.cartBtn{
	text-align: center;		
}
#id_siteinfo{
	height: 28px;
}
#id_siteinfo ul{
	float: right;
	padding-right: 10px;
}
.dropdown-toggle{


}
.cards .card .cardTitle{
	color:rgb(74, 133, 23);
	font-weight: 400;
	line-height: 1.2em;

}
.cards .card:last-child .cardTitle{
color: aliceblue;

}
.cards .card .cardList ul li {
	position:relative;
	font-size:0.8em;
	
}
.cards .card .cardList ul li:not(:last-child) {
	/*float:left;*/
	display: inline-block;
	line-height: 1.1em;
}
.cards{
	margin-bottom:1em;
}
.card{padding:10px;}

.books, .people{
	padding: 1em;
	margin-bottom:1em;
}
.books .book h3{
	font-size: 1.1em;
	margin-bottom: 8px;

}
.books .book img, .people .person img{
	margin-bottom: 8px;
}
.books .book a,  .people .person a {
	margin: 0 auto;
	position: relative;
}
.books .book p,  .people .person p{
	font-size: .8em;
}
h4{
	font-size: 0.9em;
}
.sectiontitle{
	padding: 0.5em 1em 0 1em;

}
.sectiontitle h2{
	background-color: white;
	padding: 5px;
	opacity: 0.7;
	font-size: 1.2em;
	text-decoration: underline;
}
.contactarea{
	padding: 1em;
	min-height: 15em;
}
.contactarea .contact{
	background-color: white;
	padding: 0.4em;
}
.contactarea .contact a{
	font-size: 0.9em;
	
}
.contactarea .contact p{
	font-size: 0.9em;
	
}
.testimonials{
	padding: 1em;
}
.testimonials h4{
	margin-bottom: 1em;
	text-decoration: underline;
}
.testimonials .testimonial{
	font-size: 0.7em;
	margin-bottom: 2em;
	font-style: italic;
	background-color:#c0c4b5;
	border-radius: 5px;
	padding: 1em;


}
.medtex{
	font-size: .76em;
}
.productTitleMain  h1, .prenoteTitleMain h1{
	padding:5px;
	}
	
	.offcanvas-nav a
	{
		color:#2C2C2C;
		
		}
			.offcanvas-nav a:hover
	{
		color:#50981D;
		
		}
		
		


.home-page-cards .card a{
	background-size:cover;
	aspect-ratioL:1.2;
	display:block;
	/*height:120px;*/
}
		
		
		
@media screen and (min-width:550px){
	/* max width 30em*/
	.cardTitle, .cardList{
		padding:10px;
	}		
	.conbine-nav{
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;	
		
	}
	.social-menu ul{
		display:flex;
		flex-wrap:wrap;
		justify-content:flex-end;
	}
	.multi-level-nav ul{
		display:flex;
		flex-wrap:wrap;
		justify-content:flex-start;
	}
	.multi-level-nav ul ul li{
		/*	display:none;*/
		font-size:0.75em;
	}
	.cards{
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
	}
	.card{
		/*max-width:49.5%;*/
		/*float:left;*/
		flex: 0 1 calc(50% - 0.5em);
		margin-bottom:15px;
		padding:0px;
	}
	.cardTitle{
		margin-top:0;
		margin-bottom:-0.5em;
		font-weight:normal;
	}
	.cardList{
		font-size:95%;
	}
}
@media only screen and (device-width: 550px) {
	/* For general iPad layouts */
	.cardTitle, .cardList{
		padding:5px;
	}		
	.conbine-nav{
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;	
	}
	.social-menu ul{
		display:flex;
		flex-wrap:wrap;
		justify-content:flex-end;
	}
	.multi-level-nav ul{
		display:flex;
		flex-wrap:wrap;
		justify-content:flex-start;
	}
	.multi-level-nav ul ul li{
		/*	display:none;*/
		font-size:0.75em;
	}
	.cards{
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
	}
	.card{
		/*max-width:49.5%;*/
		/*float:left;*/
		flex: 0 1 calc(50% - 0.5em);
		margin-bottom:15px;
		
	}
	.cardTitle{
		margin-top:0;
		margin-bottom:0.5em;
		font-weight:normal;
	}
	.cardList{
		font-size:95%;
	}
  }
/*  37em*/
@media screen and (min-width:635px){
		/* max width 37em*/
	.books, .people{
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
	}
	.book, .person{
		/*max-width:49.5%;*/
		/*float:left;*/
		flex: 0 1 calc(50% - 0.5em);
		margin-bottom:15px;
	}

}
@media screen and (min-width:900px){
	/* max width 62em*/
	.cards .card .cardList ul li {
		position:relative;
		font-size:0.7em!important;
		
	}
	.cards{
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
	}
	.main{
		max-width:1440px !important;
		/*max-width:980px !important;*/
		margin-left:auto;
		margin-right:auto;
	}
	.card{ 
		flex: 0 1 calc(25% - 0.5em);
		margin-bottom:15px;
		
	}
	select{ font-size:12px;}

}
@media (max-width: 576px) {  
  .xs {color:red;font-weight:bold;}
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width:768px) {  
  .sm {color:red;font-weight:bold;}
}
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) and (max-width:992px) {  
 .md {color:red;font-weight:bold;}
}
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width:1200px) { 
 .lg {color:red;font-weight:bold;}
}
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
    .xl {color:red;font-weight:bold;}
}