@charset "UTF-8";
body {
	font: 100%/1.4 Arial, Helvetica, sans-serif;
	background: rgb(0,153,255);
	background: linear-gradient(180deg, rgba(0,153,255,1) 0%, rgba(9,9,121,1) 60%, rgba(3,3,40,1) 85%, rgba(3,3,40,1) 100%);
	background-attachment:fixed;
	margin: 0;
	padding: 0;
	color: #000;
}

html {
  scroll-behavior: smooth;
}

ul, ol, dl {
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	padding-right: 15px;
	padding-left: 15px;
}

h1 {font-family: 'Roboto', sans-serif; font-size:40px; font-weight:900; letter-spacing:-0.1px; line-height:0.9;}
h2 {font-family: 'Roboto', sans-serif; font-size:30px; font-weight:700; letter-spacing:-0.3px; line-height:1.3;}
h3 {font-family: 'Roboto', sans-serif; font-size:24px; font-weight:400; letter-spacing: 0.9px; color:#09F; line-height:1.1;}
h4 {font-family: 'Roboto', sans-serif; font-size:16px; font-weight:400; letter-spacing: 0.9px; margin-bottom:10px;}
h5 {font-family: 'Roboto', sans-serif; font-size:14px; font-weight:400; letter-spacing: 0.9px; margin-bottom:10px;}
h6 {font-family: 'Roboto', sans-serif; font-size:12.5px; font-weight:300; letter-spacing: 0.9px;}
p {font-family: 'Roboto', sans-serif; font-size:16px; font-weight:300; line-height:1.5; }

a img {
	border: none;
}

a:link {
	color:#FFF;
	text-decoration: none;
}
a:visited {
	color:#FFF;
	text-decoration: none;
}
a:hover, a:active, a:focus {
	text-decoration: none;
}

.container {
	width: 960px;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
/* ~~ The header is not given a width. It will extend the full width of your layout. ~~ */
header {
	width:100%;
	height:80px;
	position: relative;
	margin-bottom:10px;
}

logo {
	width:30%;
	height:80px;
	float:left;
	color:#FFF;
}

logo a, logo a:visited {
	display:block;
	width:300px;
	height:20px;
	}
	
logo a:hover, logo a:active, logo a:focus {
	color:#09F;
	}
	
.buttonLogo {
    height: 60px;
    width: 30%;
    padding: 19px 0px 2px 0px;
    overflow: hidden;
    position: relative;
    text-align: left;
}

.buttonLogo::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 10px;
    transform: translateX(-100%);
    background: #FFF;
    transition: transform .2s ease-in-out;
	z-index:-1;
	color:#009;
}

.buttonLogo:hover::before {
    transform: translateX(0);
}

.buttonLogo span {
    position: relative;
    z-index: 1;
}

menu {
	float:right;
	height:80px;
	width:60%;
}

menu ul {
	text-decoration:none;
	list-style: none;
}

menu ul li {
	float:right;
	position:relative;
	border-left:0.5px solid #09F;
	border-right:0.5px solid #09F;
	
}

menu ul a, menu ul a:visited {
	display: block;
	height: 100%;
	width: 100%;
	text-decoration: none;
	color: #FFF;
}
	
menu ul a:hover, nav ul a:active, nav ul a:focus {
	color: #FFF;
}

.buttonLeft {
    height: 60px;
    width: 130px;
    padding: 20px 0px 0px 10px;
    overflow: hidden;
    position: relative;
	top:-20px;
	line-height: 50px;
	text-align:left
}

.buttonLeft::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 10px;
    transform: translateX(-100%);
    background: #FFF;
    transition: transform .2s ease-in-out;
	z-index:-1;
}

.buttonLeft:hover::before {
    transform: translateX(0);
}

.buttonLeft span {
    position: relative;
    z-index: 1;
}

splash {
	width:960px;
	height:280px;
	display:block;
	float:left;
	background:none;
	overflow:hidden;
	margin-bottom: 60px;
}

.slides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.slides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.slides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.slides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

sidebar {
	float: left;
	width: 250px;
	height: 100%;
	background: #09F;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left:20px;
	padding-right: 20px;
	margin-bottom: 30px;
	margin-right:20px;
}

sidebar a img {
	margin:10px 0px 0px 10px;
}

sidebar a img:hover {opacity: 0.8;
  filter: alpha(opacity=80); /* For IE8 and earlier */
}

sidebar_left {
	float: left;
	width: 250px;
	height: 100%;
	background: #009;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left:20px;
	padding-right: 20px;
	margin-right:20px;
	margin-bottom: 30px;
	background-color:#006;
}

sidebar_left a img {
	margin:10px 0px 0px 10px;
}

sidebar_left a img:hover {opacity: 0.8;
  filter: alpha(opacity=80); /* For IE8 and earlier */
}

content {
	width: 600px;
	height: 100%;
}

content a:link, content a link:visited {
	color:#06F;
}

.content {
	padding: 40px 30px 30px 20px;
	float: right;
	background: #FFF;
	margin-bottom: 20px;
	width: 600px;
}

black {
	display:block;
	float:left;
	background-color:#000;
	width:20px;
	height:290px;
	margin-left: 20px;
	margin-right: 20px;
}

/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
	padding: 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}

/* ~~ The navigation list style ~~ */
nav {
	margin:auto 0px;
}

nav ul {
	list-style: none; /* this removes the list marker */
	margin-bottom: 20px; /* this creates the space between the navigation on the content below */
}
nav ul li {
	border-bottom: 1px solid #009;
	font-family: 'Roboto', sans-serif; font-size:16px; font-weight:300; line-height:1.5; 
}
nav ul li a, nav ul li a:visited {
	padding: 10px 0px 10px 0px;
	display: block;
	width: 250px;
	text-decoration: none;
	background: none;
	height: 16px;
}

nav ul li a:hover, nav ul li a:active, nav ul li a:focus {
	background: #FFF;
	color: #09F;
}

/* ~~ The footer ~~ */
footer {
	color: #FFF;
	padding: 0px 40px 0px 0px;
	display:block;
	height:30px;
	margin-top:30px;
	width:100%;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}

footer p {
	padding: 20px 0px 0px 0px;
	float:left;
}

footer buttons {
	float:right; 
	margin:0px 0px 0px 0px;
}

footer a img {
	float:left;
	border-left: 1px solid #009;
	border-right: 1px solid #009;
}

footer buttons a img:hover {
	background-color:#009;
}

button {
	background:none;
	padding:none;
	border:none;
	display:block;
	width:150px;
	height:70px;
	float:left;
	margin-right:250px;
	border-left: 0.5px solid #009;
	border-right: 0.5px solid #009;
}

button:hover {
	background-color:#009;
}

/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
header, section, footer, aside, nav, article, figure {
	display: block;
}

/* ~~ new styles for product page. ~~ */

product_menu {
	width:100%;
	height:200px;
	display:block;
	background-opacity:-0.5;
}

product_menu ul {
	list-style:none;
	text-decoration:none;
}

product_menu ul li {
	display:block;
	width:300px;
	float:left;
	margin: 0px 20px 0px 0px;
	padding:0px;
	background:none;
}

haematex, hyphen, bioporto {
	display:block;
	width:300px;
	height:100%;
	float: left;
}

haematex img:hover, hyphen img:hover, bioporto img:hover {
	background: #09F;
}

haematex img {
	margin-top: 26px;
	border: solid #09F;
	border-width:thin;
	border-top:none;
	border-bottom:none;
	
}

hyphen img, bioporto img {
	border: solid #09F;
	border-width:thin;
	border-top:none;
	border-bottom:none;

}


title_bar {
	display:block;
	width:940px;
	background-color:none;
	height:50px;
	float:left;
	color:#FFF;
	margin-bottom:10px;
	padding-top:20px;
	padding-left:20px;
}

product_image {
	float: right;
	margin-bottom:6px;
}

about_img {
	float:left;
	display:block;
	width:100%;
	height:250px;
}

newsletter_header {
	width: 960px;
	background:#09F;
	display:block;
	height:250px;
	margin-bottom:20px;
}

newsletter_header_left {
	height:180px;
	width:300px;
	display:block;
	float:left;
	margin-top:34px;
	margin-left:20px;
}

newsletter_header_right {
	height:180px;
	width:500px;
	display:block;
	float:left;
	padding:10px;
}

product_menu ul li haematex htx_menu, product_menu ul li hyphen hpn_menu, product_menu ul li bioporto bpo_menu {
	display:hidden;
	height:100%;
	width:300px;
	margin-bottom: 20px;
	padding: 0px 0px 0px 0px;
	float: left;
}

product_menu ul li htx_menu ul, product_menu ul li hpn_menu ul, product_menu ul li bpo_menu ul {
	list-style: none; 
	margin-bottom: 20px;
	background-color:#009;
}

product_menu ul li htx_menu ul li, product_menu ul li hpn_menu ul li, product_menu ul li bpo_menu ul li {
	border-bottom: 1px solid #09F; /
	font-family: 'Roboto', sans-serif; font-size:16px; font-weight:300; line-height:1.5; 
	width: 100%;
}

product_menu ul li htx_menu ul li a, product_menu ul li htx_menu ul li a:active, 
product_menu ul li hpn_menu ul li a, product_menu ul li hpn_menu ul li a:active, 
product_menu ul li bpo_menu ul li a, product_menu ul li bpo_menu ul li a:active {
	padding: 10px 0px 10px 10px;
	display: block; 
	width: 290px;
	text-decoration: none;
	background: none;
	height: 20px;
}

product_menu ul li htx_menu ul li a:hover, product_menu ul li hpn_menu ul li a:hover, product_menu ul li bpo_menu ul li a:hover {
	background: #FFF;
	color: #09F;
}

contact_form {
	float:right;
	display:block;
	width: 610px;
	height:100%;
	background:#FFF;
	padding: 20px;
	margin-bottom:30px;
}
	
content table {
	border-color:#000;
	border-style:solid;
	border-width:4px;
	margin-bottom:30px;
	}