/* Turn off borders on linked images. */
a img
{
	border: 0;
}

/* kill default form margin/padding */
form {
	margin:0;
	padding:0;
}

/* kill default dl margin/padding */
dl, dt, dd {
	margin:0;
	padding:0;
}

/* Make sure our inline elements vertical-align properly. */
img,
input,
select,
label
{
	vertical-align: middle;
}

/* Make sure all elements inherent font properties properly. */
table,
thead,
tbody,
tfoot,
tr,
th,
td,
input,
select,
textarea
{
	font-size: 1em;
	font-family: inherit;
}

/* Make table cells default to top vertical alignment since more often than not we want it this way. */
td
{
	vertical-align: top;
}

table .action,
table .numeric,
table .money
{
	text-align: right;
}
tfoot th
{
	text-align: right;
}

/*****************************************************************
** Descriptive classes mainly for use in our rich-text-editors. **
*****************************************************************/
.floatLeft
{
	float: left;
}
.floatRight
{
	float: right;
}
.floatNone
{
	float: none;
	clear: both;
}
.alignR
{
	text-align: right;
}
.none
{
	display: none;
}
.hidden
{
	visibility: hidden;
}


body
	{
	margin: 0;
	padding: 0;
	background-color: #fff;
	font-family: verdana, helvetica, arial, sans-serif;
	font-size: 16px;
	color: #000;
	}

a {text-decoration: none;}
a:link {color: #000;}
a:visited {color: #000;}
a:active {color: #666;}
a:hover {color: #666;}


#header_wrapper
	{
		display: inline-block;
		width: 100%;
		background-color: #000;
		padding: 10px 0;
	}

#header
	{
		max-width: 1200px;
		margin: 0 auto;
		width: 980px;
		width: 98rem;
	}
	
	#header h1
		{
		display: inline-block;
		float: left;
		margin: 0;
		padding: 0;
		}
		
		#header h1 a
			{
			display: block;
			height: 150px;
			width: 132px;
			text-indent: -999em;
			background-image: url(../images/logo_philadelphiabeeco.png);
			background-repeat: no-repeat;
			background-position: 0 0;
			background-color: transparent;
			}

#navigation
	{
	display: inline;
	float: right;
	margin: 0 0 0 0;
	padding: 3rem 0 3rem 3rem;
	}
	
	#navigation ul
			{
			margin: 0;
			padding: 0;
			height: 25px;
			list-style: none;
			}
			
		#navigation ul li
			{
			display: inline;
			float: left;
			height: 25px;
			margin: 0;
			padding: 0;
			background-color: transparent;
			}
			
			#navigation ul li a
				{
			    width: 180px;
			    float: left;
			    line-height: 80px;
			    text-indent: -999em;
			    background-image: url("../images/main_nav_bg_blk.gif");
				background-repeat: no-repeat;
				background-position: 0 0;
				background-color: transparent;
				color: #fff;
				text-align: center;					
				}
				
			#navigation ul li.nav1 a
				{
				background-position: 0 0;
				}
					
			#navigation ul li.nav2 a
				{
				background-position: -180px 0;
				}
				
			#navigation ul li.nav3 a
				{
				background-position: -360px 0;
				}
				
			#navigation ul li.nav4 a
				{
				background-position: -540px 0;
				}
				
			#navigation ul li.nav5 a
				{
				background-position: -720px 0;
				}
				
			#navigation ul li.nav1 a:hover
				{
				background-position: 0 -80px;
				background-color: #fff;
				}
				
			#navigation ul li.nav2 a:hover
				{
				background-position: -180px -80px;
				background-color: #fff;
				}
				
			#navigation ul li.nav3 a:hover
				{
				background-position: -360px -80px;
				background-color: #fff;
				}
				
			#navigation ul li.nav4 a:hover
				{
				background-position: -540px -80px;
				background-color: #fff;
				}
				
			#navigation ul li.nav5 a:hover
				{
				background-position: -720px -80px;
				}
					

#main_wrapper
	{
		display: inline-block;
		width: 100%;
	}

	#main
	{
		max-width: 1200px;
		margin: 0 auto;
		width: 980px;
		width: 98rem;
	}

#content
	{
	clear: both;
	padding: 0 0 120px 0;
	}
	
	/* ___________________ SLIDER ______________________*/
	
	* {box-sizing:border-box}

		/* Slideshow container */
		.slideshow-container {
		  max-width: 1200px;
		  position: relative;
		  margin: auto;
		}
		
		/* Hide the images by default */
		.mySlides {
		  display: none;
		}
		
		/* Next & previous buttons */
		.prev, .next {
		  cursor: pointer;
		  position: absolute;
		  top: 50%;
		  width: auto;
		  margin-top: -22px;
		  padding: 16px;
		  color: white;
		  font-weight: bold;
		  font-size: 18px;
		  transition: 0.6s ease;
		  border-radius: 0 3px 3px 0;
		  user-select: none;
		}
		
		/* Position the "next button" to the right */
		.next {
		  right: 0;
		  border-radius: 3px 0 0 3px;
		}
		
		/* On hover, add a black background color with a little bit see-through */
		.prev:hover, .next:hover {
		  background-color: rgba(0,0,0,0.8);
		}
		
		/* Caption text */
		.text 
			{
			background-color: #000;
			color: #f2f2f2;
			font-size: 15px;
			padding: 8px 12px;
			/*position: absolute;
			bottom: 8px;*/
			width: 100%;
			text-align: right;
			}
		
		/* Number text (1/3 etc) */
		.numbertext {
		  color: #f2f2f2;
		  font-size: 12px;
		  padding: 8px 12px;
		  position: absolute;
		  top: 0;
		}
		
		/* The dots/bullets/indicators */
		.dot {
		  cursor: pointer;
		  height: 15px;
		  width: 15px;
		  margin: 0 2px;
		  background-color: #bbb;
		  border-radius: 50%;
		  display: inline-block;
		  transition: background-color 0.6s ease;
		}
		
		.active, .dot:hover {
		  background-color: #717171;
		}
		
		/* Fading animation */
		.fade {
		  -webkit-animation-name: fade;
		  -webkit-animation-duration: 1.5s;
		  animation-name: fade;
		  animation-duration: 1.5s;
		}
		
		@-webkit-keyframes fade {
		  from {opacity: .4}
		  to {opacity: 1}
		}
		
		@keyframes fade {
		  from {opacity: .4}
		  to {opacity: 1}
		}

	/* ___________________ END SLIDER ______________________*/

	.aboutus
		{
		background-color: #fdb627;
		padding: 0;
		margin: 10px 0 10px 0;
		overflow: auto;
		}
	
		.aboutus h2
			{
			    width: 100%;
				display: block;
				margin: 20px 0 20px 0;
			    line-height: 65px;
			    text-indent: -999em;
			    background-image: url("../images/title_ourstory.png");
				background-repeat: no-repeat;
				background-position: 20px 0;
				background-color: transparent;
				color: #fff;
				text-align: center;	
			}

		.aboutus img	
			{
				width: 450px;
				float: right;
				margin: 0 0 0 20px;
			}

		.aboutus p
			{
				padding: 20px;
				font-size: 1.2em;
				line-height: 2em;
			}
		
	
	.news_events,
	.products
		{
		background-color: #fff;
		padding: 0;
		margin: 0 0 50px 0;
		clear: both;
		overflow: auto;
		}
	
		.news_events h2,
		.products h2
			{
			    width: 100%;
			    float: left;
				margin: 50px 0;
			    line-height: 65px;
			    text-indent: -999em;
			    background-image: url("../images/title_newsevents.png");
				background-repeat: no-repeat;
				background-position: 50% 50%;
				background-color: transparent;
				color: #fff;
				text-align: center;	
				clear: both	
			}

		.products h2	
			{
				background-image: url("../images/title_localphillyhoney.png");
			}

		.news_events .callout,
		.products .callout
			{
			float: left;
			padding: 0 0 10px 0;
			margin: 0;
			width: 352px;
			border: 1px solid #000;
			text-align: center;
			background-color: #ebebeb;
			}
		.news_events .callout2,
		.products .callout2
			{
				margin: 0 6%;
			}		
		.news_events .callout3,
		.products .callout3
			{
				float: right;
			}
			.news_events .callout p,
			.products .callout p
				{
					padding: 10px;
				}
			.news_events .callout a.read_more,
			.products .callout a.read_more
				{
					display: block;
					width: 33%;
					margin: 0 auto;
					padding: 10px;
					border: 1px solid #717171;
				}

	.recipes
		{
		padding: 0;
		margin: 10px 0 10px 0;
		overflow: auto;
		}

		.recipes h2
			{
				width: 100%;
				display: block;
				margin: 0;
				padding: 20px 0 20px 0;
				line-height: 65px;
				text-indent: -999em;
				background-image: url("../images/title_recipes.png");
				background-repeat: no-repeat;
				background-position: 20px 20px;
				background-color: transparent;
				color: #fff;
				text-align: center;	
				background-color: #fdb627;
			}
		
		.featured_recipe
			{
			background-color: #8b8b8b;
			float: left;
			border: 1px solid #000;
			}
		
			.featured_recipe ul 
				{
    				list-style-type: none;
				}

		
		.recipes img	
			{
				width: 450px;
				float: left;
				margin: 0 20px 0 0;
			}


/* SECONDARY PAGE */

.secondary #content h2
	{
	clear: both;
	background-color: transparent;
	width: 100%;
	float: left;
	margin: 50px 0;
	line-height: 65px;
	text-indent: -999em;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-color: transparent;
	color: #fff;
	text-align: left;	
	}

	body.honey h2
		{
			background-image: url("../images/title_honey.png");
		}

	body.removals h2
		{
			background-image: url("../images/title_beeandwaspremoval.png");
		}

	body.education h2
		{
			background-image: url("../images/title_eductation.png");
		}

	body.contact h2
		{
			background-image: url("../images/title_contactus.png");
		}

	body.recipes h2
		{
			background-image: url("../images/title_recipes.png");
		}
	
.secondary #content .description
	{
	clear: both;
	display: block;
	padding: 0;
	overflow: auto;
	}
	
.secondary #content .description img
	{
	float: right;
	margin: 0 0 20px 20px;
	}
	
	.removals #content .description p
		{
			padding-right: 560px;
		}
	
	.secondary #content .description img.honey_diagram
		{
		float:none;
		margin: 50px 0 0 70px;
		text-align: center;
		}
		
	
	

	.calltoday
		{
		display: block;
		text-align: center;
		font-size: 34px;
		}
		
	#insect_id_wrap
		{
		clear: both;
		overflow: auto;
		}
		
		#insect_id_wrap h3,
		.honey #content h3,
		.recipes #content h3
			{
			background-color: #000;
			color: #fff;
			padding: 10px;
			clear: both;
			}
		
		.insect_id
			{
			float: left;
			width: 290px;
			margin: 0 0 8px 8px;
			}
			
			.secondary #content .insect_id img
				{
				clear: both;
				padding: 0;
				margin: 0;
				border: 1px solid #000;
				width: 290px;
				}
			
		.name_common
			{
			display: block;
			clear: both;
			text-align: center;
			background-color: #000;
			padding: 5px;
			color: #fff;
			}
	
	
/* FOOTER */

#footer_wrapper
	{
		display: inline-block;
		clear: both;
		width: 100%;
		background-color: #8b8b8b;
	}

#footer
	{
	display: block;
	text-align: left;
	padding: 20px 20px 50px 150px;
	font-size: 15px;
    color: #fff;
	max-width: 1200px;
	margin: 10px auto;
	width: 980px;
	width: 98rem;
	overflow: auto;
	background-image: url(../images/logo_philadelphiabeeco_graynotxt.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	background-color: transparent;
	}								
	
	#footer .copyright
		{
			float: left;
		}
	
	#footer .footer_nav
		{
			float: left;
			padding: 0 0 0 50px;
			margin: 0;
		}

		
		#footer .footer_nav a	
			{
				color: #fff;
			}


	#footer .social_media
		{
			float: right;
		}


	/* SOCIAL MEDIA LINKS */
		#footer .fa {
			padding: 10px 10px;
			font-size: 30px;
			width: 50px;
			text-align: center;
			text-decoration: none;
			margin: 5px 2px;
			border-radius: 50%;
		}
		
		#footer .fa:hover {
			opacity: 0.7;
		}
		
		#footer .fa-facebook {
			background: #3B5998;
			color: white;
		}
		
		#footer .fa-twitter {
			background: #55ACEE;
			color: white;
		}
		
		#footer .fa-google {
			background: #dd4b39;
			color: white;
		}
		
		#footer .fa-linkedin {
			background: #007bb5;
			color: white;
		}
		
		#footer .fa-youtube {
			background: #bb0000;
			color: white;
		}
		
		#footer .fa-instagram {
			background: #125688;
			color: white;
		}
		
		#footer .fa-pinterest {
			background: #cb2027;
			color: white;
		}
		
		#footer .fa-snapchat-ghost {
			background: #fffc00;
			color: white;
			text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
		}
		
		/** COLOR OVERIDE **/
		#footer .fa-facebook,
		#footer .fa-instagram 
			{
				background: #9c9c9c;
			}