/*   
Theme Name: Pharmaceutical Contractors
Theme URI: 
Description: 
Author: Byron Locke
Author URI: http://www.lionmarketing.co.za
Version: 1
*/

/*---------Index---------*/

/*
	1. Global Styles
	3. Structure
	2. Menu
	4. Content
	5. Custom Plugin Styles
	6. Responsive
*/

/*------------------------------------------------------*/
/*--------------------1. Global------------------------*/
/*----------------------------------------------------*/
.wp-block-image img{
	width: 200px;
	height: auto;
}
body
	{
		background-image:url(http://www.pharmacon-sa.co.za/wp-content/themes/Pharmaceutical-Contractors-2015/images/pharmaceutical-contractos-bg.png);
		background-repeat:repeat;
		margin:0px;
		padding:0px;
		font-family: 'Lato', sans-serif;
		font-weight:300;
	}
	
.wrapper
	{
		max-width:1000px;
		width:95%;
		margin:auto;
	}
	
.content-wrapper
	{
		max-width:888px;
		width:90%;
		margin:0px auto 0px auto;
		background-color:#ffffff;
		padding:20px 0px 3% 0px;
		min-height:500px;
	}
	
.clear
	{
		clear:both;
	}
	
h1
	{
		color:#239ADD;
/*		border-bottom:2px solid #239ADD;
*/		font-weight:900;
		width:100%;
		margin:5px 0px 10px 0px;
		padding:0px 0px 0px 0px;
	}

		
	
h2
	{
		color:#239ADD;
		font-weight:900;
		width:100%;
		margin:5px 0px 10px 0px;
		padding:0px 0px 0px 0px;
	}
	
h3
	{
		color:#239ADD;
		font-weight:900;
		width:100%;
		margin:5px 0px 10px 0px;
		padding:0px 0px 0px 0px;
	}
	
h4
	{
		color:#239ADD;
		font-weight:900;
		width:100%;
		margin:5px 0px 10px 0px;
		padding:0px 0px 0px 0px;
	}
	
p
	{
		font-size:14px;
		font-weight:300;
		line-height:20px;
		margin:10px 0px;
	}
	
p a
	{
		color:#239ADD;
		text-decoration:none;
		font-weight:900;
	}
	
p a:hover
	{
		color:#0F3890;
	}
	
.post ul
	{
		margin:0px 0px 0px 35px;
		padding:0px 0px 0px 0px;
	}

/*------------------------------------------------------*/
/*--------------------2. Structure------------------------*/
/*----------------------------------------------------*/

/* --- Header --- */

#header
	{
		background-color:#0F3890;
		border-bottom:5px solid #239ADD;
		margin:42px 0px 0px 0px;
		height:65px;
		padding:0px;
	}
	
#header-logo
	{
		width:15%;
		float:left;
	}
	
#header-logo img
	{
		margin:-32px 0px 0px 0px;
		position:absolute;
		z-index:999;
	}
	
#header-menu
	{
		width:60%;
		float:left;
		margin:0px 0px 0px 15%;
	}
	
#header-search
	{
		width:25%;
		float:left;
		padding:19px 0px 0px 0px;
	}

/* --- Footer --- */

#footer
	{
		background-color:#0F3890;
		border-top:3px solid #239ADD;
		margin:0px 0px 0px 0px;
		padding:15px 0px;
		width:100%;
	}
	
#footer-left
	{
		width:30%;
		margin:0px 1.5%;
		text-align:center;
		float:left;
		padding:10px 0px 0px 0px;
	}
	
#footer-middle
	{
		width:30%;
		margin:0px 1.5%;
		text-align:center;
		float:left;
		padding:10px 0px 0px 0px;
	}
	
#footer-right
	{
		width:30%;
		margin:0px 1.5%;
		text-align:center;
		float:left;
	}
	
#footer-copyright
	{
		background-color:#000000;
		width:100%;
		padding:5px 0px;
		text-align:center;
	}

/*------------------------------------------------------*/
/*--------------------3. Menu------------------------*/
/*----------------------------------------------------*/

/*#header-menu ul
	{
		margin:0px;
		padding:0px;
		list-style:none;
		width:95%;
	}

#header-menu ul li
	{
		margin:0px;
		padding:0px;
		width:18%;
		float:left;
		text-align:center;
	}
	
#header-menu ul li a
	{
		color:#ffffff;
		text-decoration:none;
		padding:26px 5px 23px 5px;
		margin:0px 0px;
		display:block;
		font-weight:300;
		font-size:13px;
	}
	
#header-menu ul li a:hover
	{
		background-color:#239ADD;
		transform: skewX(-20deg);
	}
	
#header-menu ul li.menu-item-has-children:hover ul
	{
		display:block;
	}
	
#header-menu ul li ul
	{
		margin:0px;
		padding:0px;
		position:relative;
		top:5px;
		left:-12px;
		display:none;
		width:200px;
	}

#header-menu ul li li
	{
		margin:0px;
		padding:0px;
		float:none;
		text-align:left;
		width:100%;
	}

#header-menu ul li li a
	{
		color:#ffffff;
		text-decoration:none;
		padding:5px 10px;
		margin:0px 2px;
		display:block;
		font-weight:300;
		font-size:13px;
		background-color:#239ADD;
		border-bottom:1px solid #31B1E8;
	}
	
#header-menu ul li li a:hover
	{
		background-color:#0F3890;
		transform: skewX(0deg);
	}
	
#header-menu ul li ul li ul
	{
		margin:0px;
		padding:0px;
		position:relative;
		top:0px;
		left:0px;
		display:none;
		width:200px;
	}
*/	
	
#header-menu ul ul {
	display: none;
}

#header-menu ul li:hover > ul {
		display: block;
	}
	
#header-menu ul {
	padding: 0px; 
	list-style: none;
	position: relative;
	display: inline-table;
	margin:0px;
}
	#header-menu ul:after {
		content: ""; clear: both; display: block;
	}
	
#header-menu ul li {
	float: left;
}

/*	#header-menu ul li:hover {
		background: #4b545f;
		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
	}*/	
	
#header-menu ul li a:hover {
			color: #fff;
			background-color:#239ADD;
		}
			
#header-menu ul li a {
		color:#ffffff;
		text-decoration:none;
		padding:26px 15px 23px 15px;
		margin:0px 0px;
		display:block;
		font-weight:300;
		font-size:13px;
	}
	
	
#header-menu ul li a::after
	{
		content:'';
		position:relative;
		left:20px;
	}
	
#header-menu ul li li a::after, #header-menu ul li li li a::after
	{
		content:'';
	}
	
#header-menu ul ul {
	border-radius: 0px;
	padding: 0px 0px 0px 0px;
	position: absolute; top: 100%;
	border-top:5px solid #239ADD;
	z-index:999999;
}

#header-menu ul ul li {
		float: none; 
		position: relative;
	}
	
#header-menu ul ul li:hover {
	}

#header-menu ul ul li a {
			padding: 10px 20px;
			color: #fff;
			background-color:#239ADD;
			border-bottom:1px solid #31B1E8;
		}	

#header-menu ul ul li a:hover {
				background: #0F3890;
			}

			
#header-menu ul ul ul {
	position: absolute; left: 100%; top:0;
	border:none;
			border-left:1px solid #31B1E8;
}

#header-menu ul ul ul li {
	width:150px;
		}

#header-menu ul ul ul li a {
			padding: 10px 20px;
			color: #fff;
			background-color:#21A0D8;
			border-bottom:1px solid #31B1E8;
		}

/*-------------------- Hiding Mobi Menu's --------------------*/

#mobile-menu
	{
		display:none;
	}
	
.mobile-menu-btn
	{
		display:none;
	}

/*------------------------------------------------------*/
/*--------------------4. Content------------------------*/
/*----------------------------------------------------*/

/*--- Header --- */

#header-search label
	{
		display:none;
	}
	
#header-search input
	{
		width:63%;
		background-color:#0E357A;
		color:#ffffff;
		font-size:12px;
		font-weight:300;
		font-family:lato, sans-serif;
		float:left;
		border:none;
		padding:6px 5px;
	}
	
#header-search input#searchsubmit
	{
		width:30%;
		background-color:#239ADD;
		color:#ffffff;
		font-size:12px;
		float:left;
		text-align:center;
		padding:5px;
		cursor:pointer;
	}
	
/* --- Footer --- */

#footer p
	{
		color:#ffffff;
		font-weight:300;
		text-align:center;
	}
	
#footer-copyright p, #footer-copyright a
	{
		color:#ffffff;
		font-size:10px;
		font-weight:300;
		margin:0px;
		padding:0px;
		text-decoration:none;
	}
	
#footer-copyright a:hover
	{
		text-decoration:underline;
	}
	
/* --- Page Featured --- */

#page-featured
	{
		width:55%;
		margin:0px 2% 0px 0px;
		float:left;
		padding:5px 0px 0px 0px;
	}
	
#page-featured img
	{
		width:100%;
		height:auto;
	}
	
/* --- Breadcrumbs --- */

.crumbs
	{
		margin:-10px 0px 15px 11%;
		color:#999A9E;
		font-size:12px;
		text-decoration:none;
	}
	
.crumbs a
	{
		color:#999A9E;
		font-size:12px;
		text-decoration:none;
		padding:0px 5px;
	}
	
.crumbs a:hover
	{
		color:#239ADD;
	}
	
.crumbs .breadcrumb_last
	{
		color:#239ADD;
		font-size:12px;
		text-decoration:none;
		padding:0px 5px;
	}
	
/* --- Home Page --- */

.home .content-wrapper
	{
		max-width:888px;
		width:90%;
		margin:0px auto 0px auto;
		background-color:#ffffff;
		padding:0px 0px 0px 0px;
	}
	
#home-content-left
	{
		width:42.5%;
		float:left;
		border-right:1px solid #E0E0E0;
		padding:0px 2.5% 0px 0px;
		margin:10px 0px;
	}
	
.home h1
	{
		font-size:25px;
	}

#home-featured img
	{
		width:100%;
		height:auto;
	}

#home-content-left p
	{
		text-align:justify;
	}
	
#home-content-right
	{
		width:51.5%;
		float:left;
		padding:30px 0px 0px 2.5%;
		margin:10px 0px;
	}
	
/*--home facilities--*/

#home-button-facilities, #home-button-manufacturing, #home-button-packaging, #home-button-quality, #home-button-warehousing
	{
		cursor:pointer;
		margin:-20px 0px 0px 0px;
		height:77px;
	}

#home-button-facilities-img
	{
		width:20%;
		float:left;
	}
	
#home-button-facilities-img img
	{
		position:absolute;
		margin:-20px 0px 0px 0px;
	}


#home-button-facilities-heading
	{
		background-color:#3499D1;
		height:23px;
		margin:20px 0px 0px 2px;
		padding:9px 0px 5px 75px;
		width:70%;
	}
	
#home-button-facilities-heading h3
	{
		width:auto;
		float:left;
		margin:0px;
		padding:0px;
		color:#ffffff;
		font-weight:300;
		text-transform:uppercase;
		font-size:15px;
	}
	
#home-button-facilities-content
	{
		background-color: #EDEDED;
		padding: 1px 1.4% 7px 16%;
		width: 70%;
		margin:-40px 0px 0px 1px;
	}
	
#home-button-facilities-content p
	{
		text-align:justify;
		margin:0px;
		padding:5px 5px 5px 5px;
	}

/*--home manufacturing--*/

#home-button-manufacturing
	{
		margin:-40px -10% 0px 0px;
	}

#home-button-manufacturing-img
	{
		width:15%;
		float:left;
	}
	
#home-button-manufacturing-img img
	{
		position:relative;
		top:20px;
		left:-3px;
		margin:-20px 0px 0px 0px;
	}


#home-button-manufacturing-heading
	{
		background-color:#3682CE;
		height:23px;
		margin:20px 0px 0px 14%;
		padding:9px 0px 5px 2%;
		width:65%;
		float:left;
	}
	
#home-button-manufacturing-heading h3
	{
		width:auto;
		float:left;
		margin:0px;
		padding:0px;
		color:#ffffff;
		font-weight:300;
		text-transform:uppercase;
		font-size:15px;
	}
	
#home-button-manufacturing-content
	{
		background-color: #EDEDED;
		padding: 1px 15% 7px 2%;
		width: 72%;
		margin: -40px 0px 0px 15%;
	}	

#home-button-manufacturing-content p
	{
		text-align:justify;
		margin:0px;
		padding:5px 5px 5px 5px;
	}

/*--home packaging--*/

#home-button-packaging-img
	{
		width:20%;
		float:left;
	}
	
#home-button-packaging-img img
	{
		position:absolute;
		margin:-20px 0px 0px 0px;
	}


#home-button-packaging-heading
	{
		background-color:#377BCC;
		height:23px;
		margin:20px 0px 0px 2px;
		padding:9px 0px 5px 75px;
		width:70%;
	}
	
#home-button-packaging-heading h3
	{
		width:auto;
		float:left;
		margin:0px;
		padding:0px;
		color:#ffffff;
		font-weight:300;
		text-transform:uppercase;
		font-size:15px;
	}
		
#home-button-packaging-content
	{
		background-color: #EDEDED;
		padding: 1px 1.5% 7px 16%;
		width: 70%;
		margin:-40px 0px 0px 0px;
	}
	
#home-button-packaging-content p
	{
		text-align:justify;
		margin:0px;
		padding:5px 5px 5px 5px;
	}

/*--home warehousing--*/

#home-button-warehousing
	{
		margin:-40px -10% 0px 0px;
	}

#home-button-warehousing-img
	{
		width:15%;
		float:left;
	}
	
#home-button-warehousing-img img
	{
		position:relative;
		top:20px;
		left:-3px;
		margin:-20px 0px 0px 0px;
	}


#home-button-warehousing-heading
	{
		background-color:#2E5ECC;
		height:23px;
		margin:20px 0px 0px 14%;
		padding:9px 0px 5px 2%;
		width:65%;
		float:left;
	}
	
#home-button-warehousing-heading h3
	{
		width:auto;
		float:left;
		margin:0px;
		padding:0px;
		color:#ffffff;
		font-weight:300;
		text-transform:uppercase;
		font-size:15px;
	}
	
#home-button-warehousing-content
	{
		background-color: #EDEDED;
		padding: 1px 15% 7px 2%;
		width: 72%;
		margin: -40px 0px 0px 15%;
	}	

#home-button-warehousing-content p
	{
		text-align:justify;
		margin:0px;
		padding:5px 5px 5px 5px;
	}
	
/*--home quality--*/

#home-button-quality-img
	{
		width:20%;
		float:left;
	}
	
#home-button-quality-img img
	{
		position:absolute;
		margin:-20px 0px 0px 0px;
	}


#home-button-quality-heading
	{
		background-color:#2B43AA;
		height:23px;
		margin:20px 0px 0px 2px;
		padding:10px 0px 5px 75px;
		width:70%;
	}
	
#home-button-quality-heading h3
	{
		width:auto;
		float:left;
		margin:0px;
		padding:0px;
		color:#ffffff;
		font-weight:300;
		text-transform:uppercase;
		font-size:15px;
	}
	
img.home-arrows
	{
		margin: 2px 0px 0px 2%;
		width: 10px;
	}
	
#home-button-quality-content
	{
		background-color: #EDEDED;
		padding: 1px 1.5% 7px 16%;
		width: 70%;
		margin:-40px 0px 0px 0px;
	}
	
#home-button-quality-content p
	{
		text-align:justify;
		margin:0px;
		padding:5px 5px 5px 5px;
	}
	
a.home-read-more
	{
		background-color:#239ADF;
		color:#ffffff;
		display:block;
		padding:5px 10px;
		font-size:10px;
		font-weight:300;
		text-decoration:none;
		text-transform:uppercase;
		float:right;
		clear:both;
		margin:0px 0px 0px 0px;
	}
	
/* --- Contact Us Page --- */

#contact-page-left
	{
		width:60%;
		float:left;
	}
	
#contact-page-left iframe
	{
		width:90%;
		height:350px;
	}

#contact-form-holder
	{
		width:40%;
		float:left;
	}

/*---Blog---*/

.posts {
    width: 90%;
    height: auto;
    clear: both;
    padding: 10px 0px 0px 0px;
    margin: auto;
}

.post-info
	{
		float:left;
		width:60%;
		text-align:justify;
		padding: 35px 0px 0px 0px;
	}
	
.post-read-more a
	{
		display:block;
		float:right;
		background-color: #239ADD;
		color: #FFF;
		font-size: 12px;
		text-align: center;
		padding: 5px;
		cursor: pointer;
		text-decoration:none;
		padding:5px 20px;
		margin:10px 0px 0px 0px;
	}
	
.post-read-more a:hover
	{
		background-color: #0F3890;
	}

.post-hexagon {
  position: relative;
  margin: 50px 30px 0px auto;
  width: 190px;
  height: 110px;
  background-image: url('http://i.imgur.com/IEiqEV0.jpg');
  background-position: center center;
  z-index: 1;
  /* Text styling */
  line-height: 110px;
  text-align: center;
  font-family: sans-serif;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 6px;
  color: #fff;
  color: rgba(255,255,255,.5);
  cursor: pointer;
  transition: color 500ms ease, text-shadow 500ms ease;
  float:left;
}
.post-hexagon:hover {
  color: #fff;
  text-shadow: 0 0 10px white;
}

.post-hexagon .hex-face1,
.post-hexagon .hex-face2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: inherit;
  z-index: -1;
  /* Keeps borders smooth in webkit */
  backface-visibility: hidden;
}
.post-hexagon .hex-face1:before,
.post-hexagon .hex-face2:before {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  background: inherit;
}

.post-hexagon .hex-face1 { transform: rotate(60deg); }
.post-hexagon .hex-face1:before {
  left: 0;
  transform-origin: left top;
  transform: rotate(-60deg) translate(-110px, 0);
}

.post-hexagon .hex-face2 { transform: rotate(-60deg); }
.post-hexagon .hex-face2:before {
  right: 0;
  transform-origin: right top;
  transform: rotate(60deg) translate(110px, 0);
}

.blog-navigation
	{
		width:100%;
		clear:both;
		margin:30px 0px;
		text-align:center;
	}
	
.blog-navigation .pages
	{
		margin:0px 5px 0px 0px;
		padding:5px 10px;
		color:#239ADD;
	}
	
.blog-navigation .current
	{
		margin:0px 5px 0px 0px;
		padding:5px 10px;
		border:1px solid #239ADD;
		background-color:#239ADD;
		color:#ffffff;
	}

.blog-navigation a
	{
		margin:0px 5px 0px 0px;
		padding:5px 10px;
		border:1px solid #239ADD;
		color:#239ADD;
		text-decoration:none;
	}
	
.blog-navigation a:hover
	{
		margin:0px 5px 0px 0px;
		padding:5px 10px;
		border:1px solid #239ADD;
		color:#ffffff;
		text-decoration:none;
		background-color:#239ADD;
	}

/*------------------------------------------------------*/
/*--------------------5. Custom Plugin Styles------------------------*/
/*----------------------------------------------------*/

/*---Ninja Forms---*/

.ninja-forms-contact-wrap label
	{
		font-weight:300;
		font-size:14px;
	}
	
.ninja-forms-required-items
	{
		font-size:12px;
		margin:0px 0px 10px 0px;
	}

.ninja-forms-contact
	{
		border:1px solid #193972;
		background-color:#ffffff;
		color:#000000;
		font-family:lato, sans-serif;
		padding:5px;
		font-weight:300;
		font-size:14px;
	}
	
.ninja-forms-contact-submit
	{
		    width: 30%;
    background-color: #0F3890;
    color: #FFF;
    font-size: 12px;
    float: left;
    text-align: center;
    padding: 5px 25px;
    cursor: pointer;
	border:none;
	float:right;
}

.field-wrap.label-left .ninja-forms-field {
    margin-left: 0px;
	width:100%;
}







/*
	Mosaic - Sliding Boxes and Captions jQuery Plugin
	Version 1.0.1
	www.buildinternet.com/project/mosaic
	
	By Sam Dunn / One Mighty Roar (www.onemightyroar.com)
	Released under MIT License / GPL License
*/

#facilities-menu
	{
		width:100%;
		clear:both;
		padding:20px 0px 0px 0px;
	}
	
#facilities-menu h4
	{
		color:#ffffff;
	}

* {
	margin:0;
	padding:0;
	border:none;
	outline:none;
}

/*General Mosaic Styles*/
.mosaic-block {
	float:left;
	position:relative;
	overflow:hidden;
	width:31%;
	height:150px;
	margin:1%;
	background:#111 url(http://www.pharmacon-sa.co.za/wp-content/themes/Pharmaceutical-Contractors-2015/images/progress.gif) no-repeat center center;
	border:1px solid #fff;
	-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
}

	.mosaic-backdrop {
		display:none;
		position:absolute;
		top:0;
		height:100%;
		width:100%;
		background:#111;
	}
	
	.mosaic-overlay {
		display:none;
		z-index:5;
		position:absolute;
		width:100%;
		height:100%;
		background:#111;
	}
	
		/*** Custom Animation Styles (You can remove/add any styles below) ***/
		.circle .mosaic-overlay {
			background:url(../img/hover-magnify.png) no-repeat center center;
			opacity:0;
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
			filter:alpha(opacity=00);
			display:none;
		}
		
		.fade .mosaic-overlay {
			opacity:0;
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
			filter:alpha(opacity=00);
			background:url(http://www.pharmacon-sa.co.za/wp-content/themes/Pharmaceutical-Contractors-2015/images/bg-black.png);
		}
		
		.bar .mosaic-overlay {
			bottom:-100px;
			height:100px;
			background:url(http://www.pharmacon-sa.co.za/wp-content/themes/Pharmaceutical-Contractors-2015/images/bg-black.png);
		}
		
		.bar2 .mosaic-overlay {
			bottom:-50px;
			height:100px;
			opacity:0.8;
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
			filter:alpha(opacity=80);
		}
		
			.bar2 .mosaic-overlay:hover {
				opacity:1;
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				filter:alpha(opacity=100);
			}
		
		.bar3 .mosaic-overlay {
			top:-100px;
			height:100px;
			background:url(../img/bg-black.png);
		}
		/*** End Animation Styles ***/


.menu-container {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 50px;
}
.hex-wrapper {
  display: inline-block;
}
.hex-row {
  clear: left;
}
.shift {
    margin-left: 0px;
}

.shift2 {
    margin-left: 59px;
}

.hexagon {
  float: left;
  position: relative;
  margin: 19px 3px;
  width: 110px;
  height: 64px;
  background-color: #0E357A;
  background-position: center center;
  z-index: 1;
  /* Text styling */
  text-align: center;
  font-family: Lato, sans-serif;
  font-weight: 300;
  /*letter-spacing: 6px;*/
  color: #ffffff;
  transition: color 500ms ease, text-shadow 500ms ease, background-color 500ms ease, -webkit-transform 1s ease-in-out;
}

.hexagon a {
  text-align: center;
  font-family: Lato, sans-serif;
  font-weight: 300;
  color: #ffffff;
  cursor: pointer;
  text-decoration:none;
  padding: 19px 0px 18px 0px;
  display:block;
}

.hexagon span
	{
		display:block;
  padding: 19px 0px 18px 0px;
	}

#nav-powders a {
  padding: 0px 0px 18px 0px;
}

#nav-liquids a {
  padding: 10px 0px 18px 0px;
}

.hexagon:hover {
  color: #fff;
  background-color: #239ADD;
}
.hexagon .face1,
.hexagon .face2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: inherit;
  z-index: -1;
  /* Keeps borders smooth in webkit */
  backface-visibility: hidden;
}
.hexagon .face1:before,
.hexagon .face2:before {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  background: inherit;
}
.hexagon .face1 { transform: rotate(60deg); }
.hexagon .face1:before {
  left: 0;
  transform-origin: left top;
  transform: rotate(-60deg) translate(-110px, 0);
}
.hexagon .face2 { transform: rotate(-60deg); }
.hexagon .face2:before {
  right: 0;
  transform-origin: right top;
  transform: rotate(60deg) translate(110px, 0);
}



.shape-holder
	{
		width:250px;
		float:left;
		margin:auto;
	}

.shape {
	width: 250px;
	height: 250px;
	position: relative;
	float: left;
margin: 0px 15px 20px -20px;
}
		
	.shape .overlay {
		display:block;
		width: 260px;
		height: 260px;
		position: absolute;
		top:-5px;
		left:-5px;
		-webkit-transform: scale(1,1);
		-webkit-transition-timing-function: ease-out;
		-webkit-transition-duration: 0.6s;
		-moz-transform: scale(1,1);
		-moz-transition-timing-function: ease-out;
		-moz-transition-duration: 0.6s;
		transform: scale(1,1);
		transition-timing-function: ease-out;
		transition-duration: 0.6s;				
		z-index:500;
		/* allow user to actually perform actions underneath this layer */
		pointer-events:none; 
		background-repeat: no-repeat;
		outline:0;		
	}

/* different shapes */
.shape .overlay.round {
	background: url(round.png);		
}

.shape .overlay.new-hexagon {
	background: url(http://www.pharmacon-sa.co.za/wp-content/themes/Pharmaceutical-Contractors-2015/images/hexagon.png);
	background-repeat:no-repeat;
	background-position:top center;
}

.shape .overlay.pentagon {
	background: url(pentagon.png);
}			

/* hover effect */
.shape:hover .overlay {
	-webkit-transform: scale(1.07,1.07);
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-duration: 0.3s;
	-moz-transform: scale(1.07,1.07);
	-moz-transition-timing-function: ease-out;
	-moz-transition-duration: 0.3s;
}


.shape:hover .bg {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  -khtml-opacity: 0.8;
  opacity: 0.8;
  display:block;
}

.shape:hover .details {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
	z-index:450;
  display:block;	
}	
		
		

/* content styles */
.shape .bg, 
.shape .details {
	position: absolute;
	width: 250px;
	height:260px;
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	top:-5px;
	left:0;
	opacity:0;
	-webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;				
	display:none;  
}		

.shape .bg {
	background: #0F3890;		
}

.shape .details span.heading, .shape .details a {
	font-family: 'lato', serif;		
	font-size:25px;
	display:block;
	margin:70px auto 0px auto;
	margin-top:70px;
	color:#fff;
	text-decoration:none;
	width:90%;
}

.shape .details p {
	font-family: 'lato', sans-serif;		
	color:#fff;
	width: 70%;
	font-size:14px;
	margin:0 auto;
}

.shape a.button {
	padding:5px 15px;
	font-family: 'lato', sans-serif;	
	font-size:12px;	
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	-o-border-radius: 20px;
	border-radius: 20px;
	background: #239ADD;
	text-decoration:none;
	color:#fff;
	display:block;
	width:50px;
	margin:0 auto;
	text-align:center;
	margin-top:15px;
}

	.shape a.button:hover {
		background: #fff;
		color: #2f3644;				
	}

/*------------------------------------------------------*/
/*--------------------1. Responsive------------------------*/
/*----------------------------------------------------*/

@media only screen and (min-width:771px) and (max-width:945px)
{
	
	/*-- header --*/
	#header-menu
		{
			margin: 0px 0px 0px 16%;
		}

	#header-search
		{
			width: 24%;
		}
	
	/*-- Home buttons --*/
	
	#home-button-facilities-heading h3, #home-button-manufacturing-heading h3, #home-button-packaging-heading h3, #home-button-warehousing-heading h3, #home-button-quality-heading h3
		{
			font-size: 13px;
		}
		
	#home-button-facilities-heading, #home-button-packaging-heading, #home-button-quality-heading
		{
			width: 80%;
		}
		
	#home-button-manufacturing-heading, #home-button-warehousing-heading
		{
			margin: 20px 0px 0px 8%;
			width: 70%;
		}
		
	#home-button-facilities-content, #home-button-packaging-content, #home-button-quality-content
		{
			background-color: #EDEDED;
			padding: 1px 3.3% 7px 16%;
			width: 80%;
			margin: -40px 0px 0px 1px;
		}
		
	#home-button-manufacturing-content, #home-button-warehousing-content
		{
			background-color: #EDEDED;
			padding: 1px 15% 7px 2%;
			width: 78%;
			margin: -40px 0px 0px 9%;
		}
		
	a.home-read-more
		{
			margin: 0px 0px 0px 0px;
		}
		
/*	#home-button-manufacturing, #home-button-warehousing
		{
			margin: -14px -10% 0px 0px;
		}
*/		
	#home-content-right
		{
			width: 50%;
			float: left;
			padding: 30px 1% 0px 1%;
			margin: 10px 0px;
		}
	
}

@media only screen and (max-width:581px){
	.wp-block-image img{width: 80%;}
}

@media only screen and (min-width:581px) and (max-width:770px)
{
	/*--------------------Mobile Menu--------------------*/
		
	#header-menu
		{
			display:none;
		}
	
	#header-mobile-menu
		{
			position:absolute;
			top:0px;
			left:0px;
			width:100%;
		}
	
	#mobile-menu
		{
			display:none;
			width:80%;
			float:left;
			position:absolute;
			top:0px;
			z-index:99999;
/*			border-bottom: 4px solid #EC1C24;
*/			background-color: #007EBF;
box-shadow:2px 2px 10px #333;
		}
		
	#mobile-menu ul
		{
			width:100%;
			list-style:none;
			margin:0px;
			padding:0px;
		}
		
	#mobile-menu li
		{
			width:100%;
			list-style:none;
		}
		
	#mobile-menu li a {
		width: 94%;
		background-color: #007EBF;
		padding: 6px 0px 10px 6%;
		text-align: left;
		color: #FFFFFF;
		display: block;
		list-style: none outside none;
		border-bottom: 1px solid #31B1E8;
		font-weight: 500;
		text-transform: uppercase;
		text-decoration:none;
		font-size: 13px;
	}
		
	#mobile-menu li a:hover
		{
			background-color:#0F3890;
		}
	
	#mobile-menu .sub-menu
		{
			padding:0px;
		}
		
	#mobile-menu li li a
		{
			width: 90%;
			background-color: #007EBF;
			padding: 6px 0px 10px 10%;
			text-align: left;
			color: #FFFFFF;
			display: block;
			list-style: none outside none;
			border-bottom: 1px solid #31B1E8;
			font-weight: 500;
			text-transform: uppercase;
			text-decoration:none;
			font-size: 13px;
		}
		
		#mobile-menu li li li a
		{
			width: 84%;
			background-color: #007EBF;
			padding: 6px 0px 10px 16%;
			text-align: left;
			color: #FFFFFF;
			display: block;
			list-style: none outside none;
			border-bottom: 1px solid #31B1E8;
			font-weight: 500;
			text-transform: uppercase;
			text-decoration:none;
			font-size: 13px;
		}
		
	#mobile-menu li li a:hover
		{
			background-color:#0F3890;
		}
		
	.mobile-menu-btn {
		cursor: pointer;
		text-align: center;
		display: block;
		height: 70px;
		float: right;
		padding: 0px;
		width: 75px;
		margin: 0px;
	}
	
	.mobile-menu-btn img {
		margin: 60px 0% 0% 0%;
		height:25px;
		width:25px;
	}
	
	/*--- header ---*/
	#header-search
		{
			width: 42%;
			margin: 0px 0px 0px 30%;
		}
		
	#mobile-menu #header-search
		{
			width: 90%;
			float: none;
			margin:auto;
			padding: 10% 5%;
			background-color:#0F3890;
			border-bottom: 5px solid #239ADD;
		}
		
	#mobile-menu-logo
		{
			margin:auto;
			width:96%;
			padding:2%;
			text-align:center;
			background-color:#0F3890;
			border-bottom: 5px solid #239ADD;
		}
		
	#mobile-menu-logo img
		{
			width:100%;
			height:auto;
			max-width:100px;
		}
		
	/*-- Home ---*/
	#home-content-left
		{
			width: 100%;
			float: none;
			border-right: medium none;
			padding: 0px 0% 0px 0px;
			margin: 10px auto;
			max-width: 455px;
		}
		
	#home-content-right
		{
			width: 90%;
			float: none;
			padding: 30px 0px 0px 0%;
			margin: 10px auto;
			max-width:455px;
		}
		
	/*-- Home buttons --*/
	
	#home-button-facilities-heading h3, #home-button-manufacturing-heading h3, #home-button-packaging-heading h3, #home-button-warehousing-heading h3, #home-button-quality-heading h3
		{
			font-size: 13px;
		}
		
	#home-button-facilities-heading, #home-button-packaging-heading, #home-button-quality-heading
		{
			width: 80%;
		}
		
	#home-button-manufacturing-heading, #home-button-warehousing-heading
		{
			margin: 20px 0px 0px 8%;
			width: 70%;
		}
		
	#home-button-facilities-content, #home-button-packaging-content, #home-button-quality-content
		{
			background-color: #EDEDED;
			padding: 1px 3.3% 7px 16%;
			width: 80%;
			margin: -40px 0px 0px 1px;
		}
		
	#home-button-manufacturing-content, #home-button-warehousing-content
		{
			background-color: #EDEDED;
			padding: 1px 15% 7px 2%;
			width: 78%;
			margin: -40px 0px 0px 9%;
		}
		
	a.home-read-more
		{
			margin: 0px 0px 0px 0px;
		}
		
	.crumbs
		{
			margin: -10px 0px 15px 25%;
		}
		
	.post-info
	{
		float:left;
		width:47%;
		text-align:left;
		padding:0px 0px 0px 0px;
	}
	
	.shape {
	width: 250px;
	height: 250px;
	position: relative;
	float: left;
margin: 0px 15px 20px -13px;
}
}

@media only screen and (min-width:0px) and (max-width:580px)
{
	.wrapper
		{
			width:90%;
		}
	
	/*--------------------Mobile Menu--------------------*/

	#header-menu
		{
			display:none;
		}
	
	#header-mobile-menu
		{
			position:absolute;
			top:0px;
			left:0px;
			width:100%;
		}
	
	#mobile-menu
		{
			display:none;
			width:80%;
			float:left;
			position:absolute;
			top:0px;
			z-index:99999;
/*			border-bottom: 4px solid #EC1C24;
*/			background-color: #007EBF;
box-shadow:2px 2px 10px #333;
		}
		
	#mobile-menu ul
		{
			width:100%;
			list-style:none;
			margin:0px;
			padding:0px;
		}
		
	#mobile-menu li
		{
			width:100%;
			list-style:none;
		}
		
	#mobile-menu li a {
		width: 94%;
		background-color: #007EBF;
		padding: 6px 0px 10px 6%;
		text-align: left;
		color: #FFFFFF;
		display: block;
		list-style: none outside none;
		border-bottom: 1px solid #31B1E8;
		font-weight: 500;
		text-transform: uppercase;
		text-decoration:none;
		font-size: 13px;
	}
		
	#mobile-menu li a:hover
		{
			background-color:#0F3890;
		}
	
	#mobile-menu .sub-menu
		{
			padding:0px;
		}
		
	#mobile-menu li li a
		{
			width: 90%;
			background-color: #007EBF;
			padding: 6px 0px 10px 10%;
			text-align: left;
			color: #FFFFFF;
			display: block;
			list-style: none outside none;
			border-bottom: 1px solid #31B1E8;
			font-weight: 500;
			text-transform: uppercase;
			text-decoration:none;
			font-size: 13px;
		}
		
		#mobile-menu li li li a
		{
			width: 84%;
			background-color: #007EBF;
			padding: 6px 0px 10px 16%;
			text-align: left;
			color: #FFFFFF;
			display: block;
			list-style: none outside none;
			border-bottom: 1px solid #31B1E8;
			font-weight: 500;
			text-transform: uppercase;
			text-decoration:none;
			font-size: 13px;
		}
		
	#mobile-menu li li a:hover
		{
			background-color:#0F3890;
		}
		
	.mobile-menu-btn {
		cursor: pointer;
		text-align: center;
		display: block;
		height: 70px;
		float: right;
		padding: 0px;
		width: 75px;
		margin: 0px;
	}
	
	.mobile-menu-btn img {
		margin: 60px 0% 0% 0%;
		height:25px;
		width:25px;
	}
	
	/*--- header ---*/
	#header-search
		{
			display:none;
		}
		
	#mobile-menu #header-search
		{
			width: 90%;
			float: none;
			margin:auto;
			padding: 10% 5%;
			background-color:#0F3890;
			border-bottom: 5px solid #239ADD;
			display:inherit;
		}
		
	#mobile-menu-logo
		{
			margin:auto;
			width:96%;
			padding:2%;
			text-align:center;
			background-color:#0F3890;
			border-bottom: 5px solid #239ADD;
		}
		
	#mobile-menu-logo img
		{
			width:100%;
			height:auto;
			max-width:100px;
		}
		
	/*-- Home ---*/
	.home .content-wrapper {
    max-width: 888px;
    width: 95%;
    margin: 0px auto;
    background-color: #FFF;
    padding: 7% 0px 2% 0px;
}
	
	#home-slider
		{
			display:none;
		}
	
	#home-content-left
		{
			width: 100%;
			float: none;
			border-right: medium none;
			padding: 0px 0% 0px 0px;
			margin: 10px auto;
			max-width: 455px;
		}
		
	#home-content-right
		{
			width: 100%;
			float: none;
			padding: 30px 0px 0px 0%;
			margin: 10px auto;
			max-width:455px;
		}
		
	/*-- Home buttons --*/
	
	#home-button-facilities-img img, #home-button-manufacturing-img img, #home-button-packaging-img img, #home-button-warehousing-img img, #home-button-quality-img img
		{
			display:none;
		}
	
	#home-button-facilities-heading h3, #home-button-manufacturing-heading h3, #home-button-packaging-heading h3, #home-button-warehousing-heading h3, #home-button-quality-heading h3
		{
			font-size: 13px;
		}

	#home-button-facilities-heading p, #home-button-manufacturing-heading p, #home-button-packaging-heading p, #home-button-warehousing-heading p, #home-button-quality-heading p
		{
			font-size: 13px;
		}

		
	#home-button-facilities-heading, #home-button-packaging-heading, #home-button-quality-heading
		{
			width: 95%;
			margin: 10px 0px 0px 0px;
			padding: 9px 0px 5px 5%;
		}
		
	#home-button-manufacturing-heading, #home-button-warehousing-heading
		{
			margin: 10px 0px 0px 0px;
			width: 95%;
			padding: 9px 0px 5px 5%;
		}
		
	#home-button-manufacturing, #home-button-warehousing
		{
			margin: -40px 0% 0px 0px;
		}
		
	#home-button-facilities-content, #home-button-packaging-content, #home-button-quality-content
		{
			background-color: #EDEDED;
			padding: 1px 2.5% 7px 2.5%;
			width: 95%;
			margin: -40px 0px 0px 0px;
		}
		
	#home-button-manufacturing-content, #home-button-warehousing-content
		{
			background-color: #EDEDED;
			padding: 1px 2.5% 7px 2.5%;
			width: 95%;
			margin: -40px 0px 0px 0%;
		}
		
	a.home-read-more
		{
			margin: 0px 0px 0px 0px;
		}
		
	.crumbs
		{
			margin: -10px 0px 15px 30%;
		}
		
	/*-- footer--*/
	
	#footer-left {
    width: 90%;
    margin: 0px 5%;
    text-align: left;
    float: none;
    padding: 10px 0px 0px;
}

	#footer-middle {
    width: 90%;
    margin: 0px 5%;
    text-align: left;
    float: none;
    padding: 5px 0px 0px;
}

	#footer-right {
    width: 90%;
    margin: 0px 5%;
    text-align: left;
    float: none;
    padding: 5px 0px 0px;
}

	#page-featured {
    width: 100%;
    margin: 0px 0% 0px 0px;
    float: none;
    padding: 0px 0px 0px;
	max-width:455px;
}

	#contact-page-left {
    width: 100%;
    float: none;
}

	#contact-form-holder {
    width: 100%;
    float: none;
}

	h1, .home h1 {
    color: #239ADD;
    font-weight: 900;
    width: 100%;
    margin: 5px 0px 10px;
    padding: 0px;
	font-size:23px;
}

	/*--hex shapes---*/
	.hexagon .face1, .hexagon .face2 {
    display: none;
}

	.hexagon {
    float: none;
    margin: 10px 3px;
    width: 95%;
    height: auto;
	padding:2.5%;
}

	#nav-powders a {
    padding: 0%;
}

	.hexagon span {
    display: block;
    padding: 0px;
}

	.shift2 {
    margin-left: 0px;
}

	.hexagon a {
    padding: 0px;
}
	
	#nav-liquids a {
    padding: 0px;
}

	.hex-wrapper {
    display: inline-block;
    width: 100%;
}

	.post-info
	{
		float:left;
		width:100%;
		text-align:left;
		padding:0px 0px 0px 0px;
	}
	
	.post-info p
	{
		text-align:justify;
	}
	
	.post-hexagon-wrapper
		{
			width:100%;
			text-align:center;
			clear:both;
			height:215px;
		}
		
	.post-hexagon
		{
			left:13%;
		}
		
	.shape-holder
	{
		width:250px;
		float:none;
		margin:auto;
	}

.shape {
	width: 250px;
	height: 250px;
	position: relative;
	float: left;
margin: 0px 15px 20px 0px;
}

}