@charset "utf-8";
/* CSS Document */

html,body { height:100%; }
body { 
	font-family: 'Poppins', sans-serif;
	color:#555555; font-size:1em; line-height:1.5em;
}
p { margin:0;}
a, a:visited { text-decoration:none; color:#f26522;}
a:active, a:hover { text-decoration:underline; color:#f26522;}
.clearing { clear:both;}
.left { float: left;}
.right { float: right;}
.img_left { float: left; margin:0 2em 1em 0; }
.img_right { float: right; margin:0 0 1em 2em; }

a.btn { display:inline-block; background:#106b61; padding:0.5em 1.5em; color:#ffffff;}
a.btn:hover { text-decoration:none; background:#099;}

h1, h2, h3, h4 { color:#000000; font-weight:bold;}

.pageContainer { width:78%; padding:0 11%;}
.pageContainer h3 { font-size:1.15em; text-transform:uppercase;}

#Header { background:#f7941d;}
#LogoDiv { padding:1.5em 0;}
#LogoDiv img { height:2.8em;}

#NavContainer { }
#menu { margin:0; padding:0; float:right; text-transform:uppercase; font-size:1.1em;}
#menu li { margin:0 1em; list-style:none; float:left; display:inline-block;}
#menu li a { padding:1.8em 0 0 0; display:block; border-bottom:1px solid #f7941d; color:#ffffff;}
#menu li a:hover { border-bottom:1px solid #ffffff; text-decoration:none;}
#menu li:last-child { margin-right:0;}

.slicknav_menu { display:none;}

#Main { margin:0;}
#Main p { margin-bottom:1.5em; font-size:0.9em;}
#Main h1 { margin:0; margin-bottom:1em; line-height:normal; color:#cd2808; font-size:1.8em; text-transform:capitalize;}

#home { padding-top:4em; padding-bottom:4em;}
#contact, #products { padding-top:3em; padding-bottom:4em;}
#breadcrumbs { padding:0.75em 0; border-bottom:1px solid #e1e1e1; font-size:0.8em;}

#home-banner { padding:18% 0; background:url(../images/banner-home.jpg) no-repeat; background-size:cover;}
#products-banner { text-align:center; padding:7% 0; margin:1em 1em 0 1em; background:url(../images/banner-products.jpg) no-repeat; background-size:cover; letter-spacing:0.5em; font-size:2.3em; color:#ffffff;}
#contact-banner { text-align:center; padding:7% 0; margin:1em 1em 0 1em; background:url(../images/banner-contact.jpg) no-repeat; background-size:cover; letter-spacing:0.5em; font-size:2.3em; color:#ffffff;}

#about { width:45%; float:left;}
#product-intro { width:45%; float:right;}

#homeProductCat { margin:0; padding:0;}
#homeProductCat li { 
	margin:0 0.5em 0.75em 0; padding:0; list-style:none; display:inline-block; width:30%; float:left; line-height:1.3em;
	text-transform:uppercase; font-size:0.8em;
}
#homeProductCat li:nth-child(3n) { margin-right:0;}
#homeProductCat li:nth-child(3n+1) { clear:both;}
#homeProductCat li a { 
	background:#f7941d url(../images/icon_heart_w.png) center 1.5em no-repeat; color:#ffffff; padding:4.5em 1em 1em 1em; 
	display:inline-block; height:3em; width:8.75em; text-align:center; }
#homeProductCat li a:hover { 
	background:#ffffff url(../images/icon_heart.png) center 1.5em no-repeat; color:#000; text-decoration:none;
}

#products h2 { color:#09C;}
#products h3 { margin-bottom:0; margin-top:2em;}

.nav-tabs > li > a { color:#069;}
.nav-tabs > li > a:hover { color:#fff;}
.nav > li > a { background-color: #f8ede1; margin-bottom:2px; color:#790000;}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #fff !important; background-color: #f7941d !important; border-bottom-color: #f7941d !important;
}
.nav > li > a:hover,
.nav > li > a:focus { 
	text-decoration: none; background-color: #f7941d !important; border-bottom-color: #f7941d !important;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
    background-color: #f7941d !important; border-color: transparent !important; color: #fff;
}

#products #myTabContent h4 { margin-bottom:0.75em;}
#products #myTabContent .productInfo-2, #products #myTabContent .productInfo-3 { margin:0; margin-top:2em; padding:0;}
#products #myTabContent .productInfo-2 h3, #products #myTabContent .productInfo-3 h3 { margin:0; margin-bottom:1em;}
#products #myTabContent .productInfo-2 img, #products #myTabContent .productInfo-3 img { }
#products #myTabContent .productInfo-2 li { margin:0 2em 2em 0; padding:0; list-style:none; /*display:inline-block;*/ width:46%; float:left; }
#products #myTabContent .productInfo-2 li:even { margin-right:0;}
#products #myTabContent .productInfo-2 li:odd { clear:both;}
#products #myTabContent .productInfo-3 li { margin:0 2em 2em 0; padding:0; list-style:none; /*display:inline-block;*/ width:30%; float:left;}
#products #myTabContent .productInfo-3 li:nth-child(3n) { margin-right:0;}
#products #myTabContent .productInfo-3 li:nth-child(3n+1) { clear:both;}

.infotxt { margin:0; padding:0; font-size:0.9em; line-height:normal; }
#products #myTabContent .infotxt li { 
	margin-bottom:0.25em; margin-left:1em; width:100%; list-style:url(../images/cross.png);
}

.tbl_products td, .tbl_products th { 
	border:1px dashed #ccc; border-left:0; border-bottom:0; padding:2px 10px; font-size:0.8em; line-height:normal;
	text-align:center;
}
.tbl_products td:first-child, .tbl_products th:first-child {border-left:1px dashed #ccc; }
.tbl_products tr:last-child td, .tbl_products tr:last-child th {border-bottom:1px dashed #ccc; }
.special { color:#000; font-weight:bold;}

.contactInfo { display:inline-block; margin-right:5em; float:left;}

.contactform {}
.contactform ul { margin:0; padding:0;}
.contactform li { margin:0 6.5% 0 0; padding:0; list-style:none; width:43.5%; float:left; text-align:left;}
.contactform li.right { float:right;}
.contactform li input, .contactform li textarea { 
	width:100%; padding:0.75em 1.35em; font-size:1.12em; color:#9b96a4; border:1px solid #9b96a4; margin-bottom:0.45em;
}
.contactform li.code img { margin:0.75em 0.5em}
.contactform input.btn {
	font-size:1.15em; margin-top:0.85em; width:auto; line-height:1.5em; background:#0c4da2; border:0; padding:0.5em 1.5em; 
	color:#ffffff; display:inline-block;
}
.contactform input.btn:hover {background:#f36f21;}

.mark { color:#F00;}
.error {color:#F00; padding-bottom:0.5em;}
.msg {  padding-bottom:1em; /*color:#0c4da2; font-weight:bold;*/ font-style:italic;}
.msgbox { padding-top:20px;}

.contactInfo { margin-right:5em; margin-bottom:2em;}

#Footer { background:#001220; padding-top:4%; padding-bottom:4%; font-size:0.9em; color:#adc0cf;}
#Footer h4 { color:#ffffff; font-weight:normal; font-size:1.5em; margin-top:0;}

.footerContact { float:left;}
#Footer .contacts, #Footer .contacts li { margin:0; padding:0; list-style:none; line-height:2.5em;}
#Footer .contacts li span { width:5em; display:inline-block; color:#f7941d;}

.footerLogo { float:right; font-size:0.85em; text-align:right;}
.footerLogo img { margin:1.2em 0;}

@media only screen and ( max-width: 64em ) /* 1024 */
{
#LogoDiv {}/*
#menu li a { padding:1em 0;}*/

#homeProductCat li { width:40%;}
#homeProductCat li:nth-child(even) { margin-right:0; clear:none;}
#homeProductCat li:nth-child(odd) { margin-right:3.2em; clear:both;}
#homeProductCat li a { width:7.75em;}

#products #myTabContent .productInfo-2 li { margin:0 0 2em 0; width:100%; float:none; }
#products #myTabContent .productInfo-3 li { margin:0 1em 2em 0; /*width:30%; float:left;*/}
#products #myTabContent .infotxt li { margin-bottom:0; margin-left:1.5em; width:80%;}

.contactInfo { margin-right:2em;}

.contactform li { margin:0; padding:0; list-style:none; width:90%; float:none; text-align:left;}
.contactform li.right { float:none;}
.contactform li.code {}
.contactform li.code img { margin:0.25em 0;}
.contactform input.btn { margin-top:0;}

.footerLogo { float:left; text-align:left; line-height:normal; font-size:0.75em;}
.footerLogo img { margin:1.2em 0 0.5em 0; height:2.25em;}
}

@media screen and (max-width: 40em) /* 640 */
{
p { text-align:justify;}
a.btn { text-align:left; display:block;}

.pageContainer { width:88%; padding:0 6%;}

#LogoDiv { /*text-align:center;*/ z-index:100; position:relative;}

.js #menu { display:none;}
.js .slicknav_menu { display:block; margin-top:1em;}

.slicknav_menu { background: none;}
.slicknav_menu .slicknav_icon-bar { background-color: #ffffff;}
.slicknav_btn { background: transparent; margin-right:3%;}
.slicknav_nav a { text-decoration: none; color:#ffffff; }
.slicknav_nav a:hover { background: #f7941d; text-decoration:underline; color: #fff; }

#Main p { margin-bottom:1em; font-size:0.8em; line-height:1.5em;}
#Main h1 { margin-bottom:0.75em; font-size:1.4em;}

#home, #contact, #products { padding-top:2em; padding-bottom:2em;}
#home-banner { padding:25% 0; background-position:center;}
#products-banner { padding:7% 0; margin:0.5em 0.5em 0 0.5em; letter-spacing:0.25em; font-size:1.25em; }
#contact-banner { padding:7% 0; margin:0.5em 0.5em 0 0.5em; letter-spacing:0.25em; font-size:1.25em; }

#about { width:100%; float:none; margin-bottom:2em;}
#product-intro { width:100%; float:none;}

#homeProductCat li { display:block; width:100%; margin:0; margin-bottom:0.5em;}
#homeProductCat li a { 
	background:#f7941d url(../images/icon_heart_w.png) 1em 0.75em no-repeat; padding:1.25em 1em 1em 5em; height:1.8em; 
	width:11em; text-align:left;}
#homeProductCat li a:hover { background:#ffffff url(../images/icon_heart.png) 1em 0.75em no-repeat;}

#products #myTabContent .productInfo-2 li { margin:0 0 2em 0; width:100%; float:none; }
#products #myTabContent .productInfo-3 li { margin:0 0 2em 0; width:100%; float:none; }

#products #myTabContent .infotxt li { 
	margin-bottom:0.05em; margin-left:1.25em; width:100%; list-style:url(../images/cross.png);
}

/* Data Table */
/* Force table to not be like tables anymore */
.dataTable table, .dataTable thead, .dataTable tbody, .dataTable th, .dataTable td, .dataTable tr { display: block;}

/* Hide table headers (but not display: none;, for accessibility) */
.dataTable thead tr { position: absolute; top: -9999px; left: -9999px;}
.dataTable tr { margin: 0 0 1rem 0;}
.dataTable tr:nth-child(odd) { background: #e1e1e1;}
.dataTable td {
	/* Behave  like a "row" */
	border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%;
}
.dataTable td:before {
	/* Now like a table header */
	position: absolute;
	/* Top/left values mimic padding */
	top: 0; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap;
}

/*Label the data
You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
*/
.dataTable .maskTable td:nth-of-type(1):before { content: "Ref No."; }
.dataTable .maskTable td:nth-of-type(2):before { content: "Size"; }
.dataTable .maskTable td:nth-of-type(3):before { content: "Air Cushion Thickness"; }
.dataTable .maskTable td:nth-of-type(4):before { content: "Cup Thickness"; }
.dataTable .maskTable td:nth-of-type(5):before { content: "Connector size"; }

.dataTable .circuitTable td:nth-of-type(1):before { content: "Size"; }
.dataTable .circuitTable td:nth-of-type(2):before { content: "Ref No."; }
.dataTable .circuitTable td:nth-of-type(3):before { content: "Tubing"; }
.dataTable .circuitTable td:nth-of-type(4):before { content: "Length"; }
.dataTable .circuitTable td:nth-of-type(5):before { content: "Diameter"; }
.dataTable .circuitTable td:nth-of-type(6):before { content: "Pack Size/Box"; }

.dataTable .suctionTable td:nth-of-type(1):before { content: "Ref No."; }
.dataTable .suctionTable td:nth-of-type(2):before { content: "Ref No. (Soft Tip)"; }
.dataTable .suctionTable td:nth-of-type(3):before { content: "Size"; }
.dataTable .suctionTable td:nth-of-type(4):before { content: "OD mm"; }
.dataTable .suctionTable td:nth-of-type(5):before { content: "ID mm"; }
.dataTable .suctionTable td:nth-of-type(6):before { content: "Length mm"; }
.dataTable .suctionTable td:nth-of-type(7):before { content: "Colour Code"; }

.contactInfo { display:block; margin-right:0; margin-bottom:2em; float:none;}

.contactform li { margin:0; padding:0; list-style:none; width:85%; float:none; text-align:left;}
.contactform li.right { float:none;}
.contactform li.code { text-align:center;}
.contactform li.code img { margin:0.25em 0;}
.contactform input.btn { margin-top:0; display:block; padding:0.5em auto; width:100%;}

#Footer { display:block; font-size:0.75em; padding-top:10%; padding-bottom:10%;}
#Footer .contacts, #Footer .contacts li { line-height:1.5em; margin-bottom:1em;}
#Footer .contacts li span { width:5em; display:block;}

.footerLogo { float:left; text-align:left; line-height:normal; font-size:0.75em;}
.footerLogo img { margin:1.2em 0 0.5em 0; height:2.25em;}
}

@media screen and (max-width: 30em) /* 480 */
{
.js .slicknav_menu { display:block; margin-top:-3.2em;}
}