/*
* Skeleton V1.1
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 8/17/2011
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */
	/*Header Block*/
	header { background:#003839; text-align:center; margin:0 0 40px 0}
	.facebook { display:block; width:24px; height:30px; position:absolute; right:20px; bottom:-30px;}
	.facebook a { display:block; width:24px; height:30px; border:none;}
	div.header_block { width:940px; padding:20px 0 0 0; margin:0 auto; position:relative; text-align:left}
	/*Main Navugation*/
	nav.head_nav { padding:1px 0; height:80px;}
	nav.head_nav ul {list-style:none; margin:0; /*padding:18px 100px 18px 195px;*/ padding:18px 0px; display:block; overflow:hidden}
	nav.head_nav ul li {
	margin:0;
	float:left;
	padding:0;
	text-align: center;
	width: 12%;
}
	nav.head_nav ul li.second { padding:0 460px 0 0px; background:none;}
	nav.head_nav ul li.last { background:none; padding:0;}
	nav.head_nav ul li a {font-size:18px; line-height:20px; color:#fff; font-family:Arial, Helvetica, sans-serif; display:block; padding:0 5px; text-decoration:none}
	nav.head_nav ul li a:hover {color:#a54900; text-decoration:none }
	nav.head_nav ul li.act a {
	color:#c1d62e;
	text-decoration:none
}
	/*Logo*/
	.logo { position:absolute; right:50%; margin-right:-161px; top:14px; background:url(../images/bg_main.png) repeat; width:auto; height:70px;}
	.logo a { /*background:url(../images/bg_logo.png) no-repeat;*/ width:292px; height:70px; display:block; color:#fff; font-size:37px; line-height:39px; text-align:center; text-transform:uppercase; margin-left:0; text-decoration:none; font-family:Arial, Helvetica, sans-serif;}
	/*.logo a span { display:block; text-align:center; padding:25px 0 9px 0; color:#ffffff; font-size:18px; line-height:20px; font-family:Arial, Helvetica, sans-serif}*/
	/*Slider*/
	.top_slider { width:940px; margin:0 auto; z-index:100; overflow:hidden}
	#top_slider { }
	/*Animated Blocks*/
	.sti-menu { width:960px; margin:0 0 45px 0}
	.sti-menu li { width:220px; margin:0 10px; height:330px}
	.sti-icon {left:31px; top:75px;	width:158px; height:158px;}
	.sti-menu li a h3 {top:250px; left:0px; padding:0px 20px 0 25px; line-height:21px; text-transform:none!important}
	.sti-menu li a h2 {top:20px; left:0px; padding:0; font-size:23px;}
	.sti-icon-refills{background-image:url(../images/icons/icon_refills.png); background-size:100% auto;}
	.sti-icon-compounding{background-image:url(../images/icons/icon_compounding.png); background-size:100% auto;}
	.sti-icon-about{background-image:url(../images/icons/icon_aboutus.png); background-size:100% auto;}
	.sti-icon-contact{background-image:url(../images/icons/icon_contact.png); background-size:100% auto;}
	/*Footer*/
	footer { background:url(../images/bg_headerline-x.png) repeat-x bottom left; text-align:center; padding:20px 0 38px 0; text-align:center}
	.footer { width:900px; margin:0 auto; padding:30px 20px 10px 20px; background:#003839; text-align:left; border-bottom:4px #a54900 solid; border-top:4px #a54900 solid; color:#FFFFFF;}
	.footer .copy { float:left; color:#ffffff; line-height:20px; font-size:13px; padding:0 0 20px 60px}
	.footer .social { float:right; text-align:left; padding:0 60px 0 0}
	.footer .social ul { list-style:none; margin:0; padding:0}
	.footer .social ul li { padding:0 0 0 16px; margin:0; width:24px; height:24px; float:left}
	.footer .social ul li a { width:24px; height:24px; display:block; }
	.footer .social ul li a.soc_rss { background:url(../images/icons/ico_rss.png) no-repeat; }
	.footer .social ul li a.soc_facebook { background:url(../images/icons/ico_f.png) no-repeat; }
	.footer .social ul li a.soc_flicker { background:url(../images/icons/ico_flick.png) no-repeat; }
	.footer .social ul li a.soc_twitter { background:url(../images/icons/ico_t.png) no-repeat; }
	
	/*Dividers*/
	.divider {background:url(../images/sep_cont1.png) repeat-y;}
	.divider10 {background-position:70.7% 0}
	.divider40 {background-position:40.7% 0}
	.divider60 {background-position:59.4% 0}
	.block_mar40 { margin-bottom:40px!important}
	
	ul.portfolio li .portfolio_overlay .zoom  { display:block}
	div#fbfollow {
    color: white;
    padding: 15px;
 }
	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
	body { overflow-x:hidden}
	/*Header Block*/
	header { background:#003839; text-align:center; margin:0 0 40px 0; text-align:center;}
	div.header_block { width:748px; padding:20px 0 0 0; margin:0 auto; position:relative; text-align:left}
	.camera_wrap {
		height:336px !important}
	/*Main Navugation*/
	nav.head_nav {
	padding:1px 0
}
	nav.head_nav ul {
	list-style:none;
	margin:0;
	padding:18px 0px;
	display:block;
	overflow:hidden
}

	nav.head_nav ul li.second {
	padding:0 338px 0 0;
}

nav.head_nav ul li {
	padding:0 60px 0 0;
	width:auto;
}

	nav.head_nav ul li a {
	font-size:14px;
}
	/*Slider*/
	.top_slider { width:767px; margin:0 auto; z-index:100; overflow:hidden}
	/*Animated Blocks*/
	.sti-menu { width:768px; margin:0 0 45px 0}
	.sti-menu li { width:172px; margin:0 10px; height:330px; padding-bottom:15px}
	.sti-icon {left:7px; top:65px;	width:158px; height:158px;}
	.sti-menu li a h3 {top:230px; left:0px; padding:0px 10px 0 10px;}
	.sti-menu li a h2 {top:10px; left:0px; padding:0; font-size:18px;}
	/*Footer*/
	.footer { width:728px; margin:0 auto; padding:30px 20px 30px 20px; background:#003839; text-align:left}
	
	/*Fixes*/
	ul.featured_images li { margin:0; padding:0 20px 10px 0px; border:none; float:left}
	ul.featured_images li:first-child { padding:0 20px 10px 0px; border:none}
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
	body { overflow-x:hidden}
	/*Header Block*/
	header { background:#003839; text-align:center; margin:0 0 40px 0; text-align:center;}
	div.header_block { width:420px; padding:20px 0 0 0; margin:0 auto; position:relative; text-align:left}
	/*Main Navugation*/
	nav.head_nav { padding:1px 0}
	nav.head_nav ul {list-style:none; margin:0; padding:18px 0 8px 0; display:block; overflow:hidden}
	nav.head_nav ul li { margin:75px 0 0 0; float:left; padding:0 20px 10px 0 !important; background:none; width:auto;}
	nav.head_nav ul li a {font-size:12px; line-height:20px; color:#5A5A5A; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif; display:block; padding:0 10px; text-decoration:none}
	nav.head_nav ul li a:hover {color:#A34700; text-decoration:none }
	/*Slider*/
	.top_slider { width:420px; margin:0 auto; z-index:100; overflow:hidden}
	#top_slider { margin-bottom:75px!important}
	/*Animated Blocks*/
	.sti-menu { width:420px; margin:0 0 45px 0}
	.sti-menu li { width:190px; margin:0 10px; height:330px; padding-bottom:15px}
	.sti-icon {left:16px; top:65px;	width:158px; height:158px;}
	.sti-menu li a h3 {top:230px; left:0px; padding:0px 10px 0 10px;}
	.sti-menu li a h2 {top:10px; left:0px; padding:0; font-size:18px;}
	/*Footer*/
	.footer { width:380px; margin:0 auto; padding:30px 20px 30px 20px; background:#003839; text-align:left}
	.footer .copy { float:left; color:#ffffff; line-height:24px; font-size:11px; padding:0 0 0 30px}
	.footer .social { float:right; text-align:left; padding:0 30px 0 0}
	.footer .social ul { list-style:none; margin:0; padding:0}
	
	ul.portfolio li .portfolio_overlay .zoom { display:none}
	/*Fixes*/
	ul.featured_images li { margin:0; padding:0 20px 10px 0px; border:none; float:left}
	ul.featured_images li:first-child { padding:0 20px 10px 0px; border:none}	
	.columns { padding-bottom:40px}
	.block_mar40 { margin-bottom:0px!important}
	/*Dividers*/
	.divider {background:none}
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
	body { overflow-x:hidden}
	/*Header Block*/
	header { background:#003839; text-align:center; margin:0 0 40px 0; text-align:center;}
	div.header_block { width:300px; padding:20px 0 0 0; margin:0 auto; position:relative; text-align:left}
	/*Main Navugation*/
	nav.head_nav { padding:1px 0; margin-bottom:40px; margin-top:40px; height:auto;}
	nav.head_nav ul {list-style:none; margin:0; padding:18px 0px 5px 0px; display:block; overflow:hidden; clear:both;}
	nav.head_nav ul li { margin:0; float:none; padding:10px 0; background:none; clear:both; border-bottom:1px #a54900 dashed; width:auto;}
	nav.head_nav ul li.first {padding:10px 0;}
	nav.head_nav ul li.second { padding:10px 0;}
	nav.head_nav ul li.last { padding:10px 0;}
	nav.head_nav ul li a {font-size:12px; line-height:20px; color:#fff; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif; display:block; padding:0 5px; text-decoration:none}
	nav.head_nav ul li a:hover {color:#a54900; text-decoration:none }
	/*Logo*/
	.logo { position:absolute; right:-12px!important; margin:0px; top:15px; background:url(../images/bg_main.png) repeat; width:auto; height:70px;}
	.logo a { /*background:url(../images/bg_logo.png) no-repeat;*/ width:292px; height:70px; display:block; color:#fff; font-size:37px; line-height:39px; text-align:center; text-transform:uppercase; text-decoration:none; font-family:Arial, Helvetica, sans-serif}
	/*.logo a span { display:block; text-align:center; padding:25px 0 9px 0; color:#ffffff; font-size:18px; line-height:20px; font-family:Arial, Helvetica, sans-serif}*/	
	/*Slider*/
	.top_slider { width:300px; margin:0 auto; z-index:100; overflow:hidden; visibility:hidden; display:none;}
	#top_slider { margin-bottom:50px!important}	
	/*Animated Blocks*/
	.sti-menu { width:300px; margin:0 0 45px 0}
	.sti-menu li { width:130px; margin:0 10px; height:330px; padding-bottom:15px}
	.sti-icon {left:10px; top:70px;	width:110px; height:110px;}
	.sti-menu li a h3 {top:195px; left:0px; padding:0px 10px 0 10px; line-height:20px}
	.sti-menu li a h2 {top:10px; left:0px; padding:0; ; font-size:12px; line-height:26px}
	.sti-icon-refills{background-image:url(../images/icons/icon_refills.png); background-size:100% auto;}
	.sti-icon-compounding{background-image:url(../images/icons/icon_compounding.png); background-size:100% auto;}
	.sti-icon-about{background-image:url(../images/icons/icon_aboutus.png); background-size:100% auto;}
	.sti-icon-contact{background-image:url(../images/icons/icon_contact.png); background-size:100% auto;}
	/*Footer*/
	.footer { width:270px; margin:0 auto; padding:15px 15px 20px 15px; background:#003839; text-align:left}
	.footer .copy { float:none; color:#ffffff; line-height:24px; font-size:11px; padding:0 0 0 0px; text-align:center; width:100%; clear:both}
	.footer .social { float:none; text-align:left; padding:10px 0px 0 65px; clear:both; text-align:center}
	.footer .social ul { list-style:none; margin:0; padding:0;}

	/*Fixes*/
	ul.featured_images li { margin:0; padding:0 20px 10px 0px; border:none; float:left}
	ul.featured_images li:first-child { padding:0 20px 10px 0px; border:none}	
	.columns { padding-bottom:30px}
	.block_mar40 { margin-bottom:0px!important}
	/*Dividers*/
	.divider {background:none}
	ul.portfolio li .portfolio_overlay .zoom { display:none}
	}


/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		/*header { background:#ffff00; height:100px}*/
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		/*header { background:#ff00ff; height:100px}*/
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		/*header { background:#00ff00; height:100px}*/
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		/*header { background:#0000ff; height:100px}*/
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		/*header { background:#ff0000; height:100px}*/
	}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/
.marker-list{}
.marker-list li{
	background:url(../images/menu_marker.png) 0 5px no-repeat;
color:#7d7d7d;
	padding-left:18px;
	margin-top:12px;
}
.marker-list li:first-child{
	margin-top:0;
}
.marker-list li a{
	color:#A34700;
	font-size:15px;
}

.marker-list h4 {
	color:#A34700;
}

.company_logos {
	width:25%;
	text-align:center;
	float:left;
}

.company_logos img {
	width:80%;
	height:auto;
}

.img {
	display:block;
	float:right;
	margin:0 0 10px 10px;
	border:2px #A34700 solid;	
}

@media only screen and (max-width: 479px) { 
.company_logos {
	width:100%;
	text-align:center;
	float:none;
}

.company_logos img {
	width:50%;
	height:auto;
}

.img {
	display:block;
	float:none;
	margin:0 auto 20px auto;
	border:2px #A34700 solid;	
}

.sti-menu li {
	height:360px !important
}
}